父传子
通过属性向下传 eg:<bb :abc='name'></bb>
bb是子组件
send自定义的属性
name是父组件里面的属性
子组件 使用 props这个属性去接收
数组格式接收 props:['send']
对象格式接收 props:{'send':String} 对象格式接收可以规定接收的类型
父传子使用属性向下传
如果你的属性值是变量或者是数组需要使用(:属性)这种动态绑定 ,不加(:)会变成字符串
举一个简单的例子
<div id="box">
<aa></aa>
</div>
<script>
var parent = `
<div>
我是父组件组件
<bb :send='name'></bb>
</div>
`
Vue.component('aa',{
template:parent,
data(){
return{
name:"张三"
}
},
})
var children = `
<div>
我是子组件组件
这个是父元素传递过来的内容:{{send}}
</div>
`
Vue.component('bb',{
template:children,
// 使用对象格式可以规定类型
props:{
send:String
}
})
var VM = new Vue({
el:"#box"
})
</script>
子传父
在子组件标签上使用 @自定义事件名='父组件里面的方法名'
例如 <zi @aa='mth'></zi>
子组件内容通过事件触发
使用 this.$emit('自定义事件名','值')传递数据
<div id="box">
<aa></aa>
</div>
<script>
var parent = `
<div>
我是父组件组件
<bb @aa='mth'></bb>
</div>
`
Vue.component('aa',{
template:parent,
data(){
return{
name:"张三"
}
},
methods:{
mth(a){
console.log(a);
}
}
})
var children = `
<div>
我是子组件组件
<button @click='send'>点击</button>
</div>
`
Vue.component('bb',{
template:children,
// 使用对象格式可以规定类型
data(){
return{
name:'子组件的内容'
}
},
methods:{
send(){
this.$emit('aa',this.name)
}
}
})
var VM = new Vue({
el:"#box"
})
</script>
总结一下
父传子就是通过属性向子组件传的,然后子组件通过props来接收父组件传的东西
子传父就是通过事件向父组件传的,然后父组件定义一个方法接收一下