父子间通讯
<!--父-子传递-->
<parent con="你好(父传子)"></parent> 复制
定义的组件
Vue.component('parent',{
props:['con'],
template:`
<p @click="alert">点我传递信息</p>
`,
methods:{
alert:function(){
alert(this.con)
}
}
}) 复制
需要把父级的属性传递的数放在子组件的props数组中,然后可以调用
子父通讯
<!---子-父传递-->
<son @alert="test"></son> 复制
定义的组件
Vue.component('son',{
template:`<p @click="alert">这就是一个组件而已</p>`,
data:function(){
return{
msg:"我是子组件的内容,子传父"
}
},
methods:{
alert:function(){
this.$emit('alert',this.msg)
}
}
}) 复制
子组件需要监控一个事件,然后在实例中执行这个方法就行,函数参数可以传递data,然后在实例中执行改方法!
var app=new Vue({
el:"#app",
data:{
data:''
},
methods:{
test:function (data) {
alert(data)
}
}
}) 复制