vue
1、父傳子
通過props靜態或動態傳遞值
<blog-post title="My journey with Vue"></blog-post>
<blog-post v-bind:title="post.title"></blog-post>//注意post.title此時為變數，不是字串
複製程式碼"Fu":{
props:["title"],//子元件把該變數存入props陣列
data:function(props){//在data裡使用props時，需要傳入引數props
return{
fu:props.la,
can:"",
hua:""
}
},
methods:{
haha(a){
this.can = a;
console.log(this.can);
},
asd(a){
this.hua=a
}
},
created(){
console.log("aaaa");
},
template:
`<div>
<h1 >hello world----{{this.can}}</h1>
<p>我是父元件----{{fu}} </p>
<p>平行元件-------{{this.hua}}</p>
<Zi :data="fu" @lala="haha" @aq="asd"></Zi>
</div>`,
複製程式碼2、子傳父
在父元件的根元素上直接監聽一個原生事件
<my-component v-on:my-event="doSomething"></my-component>複製程式碼然後在子元件的點選事件裡觸發事件
this.$emit('myEvent')複製程式碼3、平行元件之間通訊
var vm = new Vue({});//新建一個空的vue例項，通過在這個例項上繫結和觸發事件，在平行元件之間通訊
var app = new Vue({
el:"#box",
data:{
str3:"",
str4:""
},
methods:{
},
components:{
"x-one":{
template:"#one",
data:function(){
return {
str:"我是one",
stt:"hello"
}
},
methods:{
onec:function(){
vm.$emit("one",this.stt)//在onec方法中觸發one事件
}
}
},
"x-two":{
template:"#two",
data:function(){
return {
str1:"我是two",
srr:"world"
}
},
methods:{
twoc:function(){
vm.$emit("two",this.srr)//在onec方法中觸發tewc事件
}
}
},
"x-three":{
template:"#three",
data:function(){
return {
str2:"我是three",
str3:"",
str4:""
}
},
mounted:function(){
var that = this;
vm.$on("one",function(data){
that.str3=data;
})
vm.$on("two",function(data){//在該元件的掛載鉤子函式裡繫結two事件
that.str4=data;
})
}
}
}
})
複製程式碼