Vue組件傳值

1. 父向子傳值

• 在子組件的自定義標籤上寫 動態屬性:data = '數據'
• 在子組件中定義props的選項['data']

// 父組件
<template>
  <div id="app">
    <p>我是父組件的內容區域</p>
    <p>{{msg}}</p>
    <child-a :data='msg'></child-a>
  </div>
</template>

<script>
import childA from '@/components/childA'

export default {
  name: 'App',
  data(){
    return{
      msg:'我是父組件中的數據'
    }
  },
  components:{ comOne }
}
</script>
複製代碼

// 子組件
<template>
 <div>
   <p>我是子組件的內容區域</p>
   <p>{{msg}}</p>
   <p>{{data}}</p>
 </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '我是子組件的數據'
    }
  },
  //使用props來讀取data
  props:['data']
}
</script>
複製代碼

2. 子向父傳值

• 自定義事件
  • 綁定事件 <child-a @toParent="fn"></child-a>
  • 觸發事件 this.$emit('toParent', this.msg)
• 步驟
  • 須要在子組件的自定義標籤上綁定一個自定義事件
  • 若是須要傳值給父組件,讓子組件去觸發這個事件this.$emit(),觸發的同時傳參

// 父組件
<template>
  <div id="app">
    <p>我是父組件的內容區域</p>
    <p>{{msg}}</p>
    <child-a @toParent="fn"></child-a>
  </div>
</template>

<script>
import childA from '@/components/childA'
export default {
  name: 'App',
  data(){
    return{
      msg:'我是App組件中的數據',
      test:''
    }
  },
  components:{ childA },
  methods:{
    fn(val){
      this.test=val
    }
  }
}
</script>
複製代碼

// 子組件
<template>
 <div>
   <p>我是子組件的內容區域</p>
   <p>{{msg}}</p>
   <button @click="ToParent">向父組件中發射一個fn事件</button>
 </div>
</template>

<script>
export default {
  name: 'comTwo',
  data () {
    return {
      msg: '我是子組件的數據'
    }
  },
  methods:{
    ToParent(){
      //$emit---發射的意思,使用$emit方法,去發射一個sender事件
      this.$emit('toParent',this.msg)
    }
  }
}
</script>
複製代碼

3. 非父子傳值

• 事件總線
  • 統一控制事件的綁定和觸發
  • 建立一個busevent.js模塊 暴露vue實例

  // 事件總線
  // 1.依賴一個vue實例
  import Vue from 'vue'
  const vm = new Vue()
  export default vm
  // 2.在A.B兩個組件中導入這個實例
  // 3. 綁定事件
  // 4. 在實例中綁定的事件 只有當前實例能夠去觸發
  複製代碼

• 步驟
  • 在A組件導入 事件總線模塊 獲得一個實例,而後用這個實例綁定一個自定義事件

  <template>
      <div>
          child-a <b>{{count}}</b>
  </div>
  </template>
  
  <script>
      import bus from './busEvent'
      export default {
      name: 'child-a',
      data () {
          return {
              count: 0
          }
      },
      created () {
          bus.$on('toB',(data) =>{
              this.count = data
          })
      }
  }
  </script>
  複製代碼

  • 在B組件也導入事件總線模塊獲得一個實例,用這個實例觸發在A組件中綁定的自定義事件

  <template>
      <div>
          child-b
          <button @click="fn">toA</button>
      </div>
  </template>
  
  <script>
      import bus from './busEvent'
  
      export default {
          name: 'child-b',
          data () {
          return {
              count: 100
          }
      },
      methods: {
          fn () {
              bus.$emit('toB', this.count)
          }
      }
  }
  </script>
  複製代碼

  • 最後經過事件的回調函數進行傳參