vue 組件數據通訊

父組件傳給子組件props

父組件設置props值

<aaa :say="text" componenTitle=></aaa>

text:"組件內部數據傳遞"


注意：傳遞固定內容 say="固定內容" ，傳遞data裏面的變量  :say="text" 

傳boolean值和對象

:componen-title='false'   :duixiang="{name:'3131'}"

子組件接收props

props: {
  say :{
    type: String
  },
  componenTitle:{
    type: Boolean
  },
  duixiang:{
    type:Object
  }
}

console.log(this.say);
console.log(this.componenTitle);
console.log(this.duixiang);

父組件獲取子組件屬性和方法: 

<aaa :say="text"  ref="aaa"></aaa>

console.log(this.$refs.aaa.屬性名/方法名);

子組件傳給父組件this.$emit

父組件設置

<aaa:say="text"  ref="aaa"  v-on:somesth-happen="handlerHappen"></aaa>
methods:{
  handlerHappen: function(a) {
    console.log("子組件傳遞數據給父組件");
    console.log(a);
  }

}

子組件設置

<button @click="onClickMe">觸發</button>

methods: {
  onClickMe: function () {
    this.$emit('somesth-happen', this.wokao);
  }
}

bus通訊

 

 

 

https://segmentfault.com/a/1190000010385155

componenTitle