父子間通訊
<!--父-子傳遞-->
<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)
}
}
}) 複制