VueJs組件之父子通訊的方式

這篇文章主要介紹了VueJs組件之父子通訊的方式，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

組件（父子通訊）

一、概括

在一個元件內定義另一個元件，稱為父子元件。

   但要注意的是：1.子元件只能在父元件內部使用（寫在父親元件tempalte）;

                上的資料,每個元件實例的作用域是獨立的；

那如何完成父子如何完成通訊，簡單一句話：props down, events up ：父元件透過props 向下傳遞資料給子元件，子元件透過events 給父元件發送

父傳子：Props
子傳父：子：$emit(eventName) 父$on(eventName)
父存取子：ref

下面對三個進行案例講解：

二、父傳子：Props

    　元件實例的作用域是孤立的。這表示不能 (也不應該) 在子元件的範本內直接引用父元件的資料。要讓子元件使用父元件的數據，需要透過子元件的props 選項

　　使用Prop傳遞資料包括靜態和動態兩種形式，以下先介紹靜態props

#1、靜態props

效果：

 命名約定：

     對於props宣告的屬性來說，在父級HTML模板中，屬性名需要使用中劃線寫法

    子級props屬性聲明時，使用小駝峰或中劃線寫法都可以；而子級模板使用從父級傳來的變數時，需要使用對應的小駝峰寫法

上面這句話什麼意思呢？

       如果我們childNode中的myMessage改成{{my-message}}看運行結果：

##2.動態props

    在模板中，要動態地綁定父元件的資料到子模板的props，與綁定到任何普通的HTML特性相類似，就是用v-bind。每當父元件的資料變化時，該變化也會傳導給子元件

 var childNode = {
  template: '
{{myMessage}}
',
  props: ['my-message']
    }

 var parentNode = {
  template: `
 

 
 
 
`,
  components: {
   'child': childNode
  },
  data() {
   return {
    'data1': '111',
    'data2': '222'
   }
  }
 };

3、傳遞數字

#初學者常犯的一個錯誤是使用字面量語法傳遞數值

#結果：

     因為它是一個字面prop，它的值是字串"1" 而不是number。如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作JS表達式計算

#     如何把String轉成number呢，其實只要改一個地方。

 var parentNode = {
  template: `
 

 //只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
 
 
`,
 };

     當然你如果想要透過v-bind想傳一個string類型，那該怎麼做呢？

    我們可以使用動態props，在data屬性中設定對應的數字1

var parentNode = {
 template: `
 

 
 
`,
 components: {
 'myChild': childNode
 },
 //这里'data': 1代表就是number类型，'data': "1"那就代表String类型
 data(){
 return {
  'data': 1
 }
 }
};

三、子轉父：$emit

 關於$emit的用法

   2、子元件可以使用 $emit 觸發父元件的自訂事件。

子主鍵

父元件