父组件向子组件传参
首先我们创建名字为todo-item的子组件
Vue.component('todo-item', {
template: '<p>{{message}}</p>',
props:['message']
})
父组件为
html部分
<div id="container">
<h2>parent父组件部分</h2>
<!--message用来接收父组件a的值-->
<todo-item v-bind:message="a"></todo-item>
<div >{{a}}</div>
</div>
js部分
var vm = new Vue({
el:'#container',
data:{
a:'父组件里面的div',
}
})
子组件向父组件传参
//子组件部分
Vue.component('todo-item', {
template: '<p>{{message}}</p>',
data(){
return {
message:'组件下面的a'
}
},
mounted:function(){
//子组件通过$emit触发父组件的listenTo事件
this.$emit('ievent',this.message);
},
})
父组件为
html部分
<div id="container">
<h2>child子组件部分</h2>
<todo-item @ievent="listenTo"></todo-item>
<div >{{a}}</div>
</div>
js部分
var vm = new Vue({
el:'#container',
data:{
a:0,
},
methods:{
listenTo:function(message){
this.a=message;
}
}
})
再说一个非常方便的v-ref
<div id="parent">
<user-profile ref='profile'></user-profile>
<p>{{number}}</p>
</div>
<script>
Vue.component('user-profile', {
template: '<span>{{ msg }}</span>',
data: function () {
return {
msg: 123
}
}
})
new Vue({
el: '#parent',
data:{
number:1
},
mounted:function () {
this.number=this.$refs.profile.msg;
}
});
</script>
