【Vue】組件之間共享數據的方式

0. 單頁面傳值

<template>
  <div>
    <span>{{msg}}</span>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '單頁面傳值'
    }
  }
}
</script>

1. 父—>子 ：(父組件用v-bind給子組件綁定數據) :動態數據綁定

 **父：自定義屬性名 + 數據（要傳遞）=> :value="數據"**

 **子：props ["父組件上的自定義屬性名“] =>進行數據接收**

• 父組件
  • 首先在script標簽內引入子組件
  • 定義一個components局部注冊組件 命名為son 把son組件寫到模板區域
    • component是注冊全局組件
    • components是局部注冊組件
  • 在注冊組件中，綁定一個動態自定義屬性名並且賦值:自定義屬性名="xx"

<template>
  <div id="father">
    <h1>父組件</h1>
    <span>父傳子-父</span>
    <input type="text" v-model="con">
    <son :msg="con"></son>
  </div>
</template>

<script>
// 引入子組件
import son from '../components/fatherToSonSon.vue'

export default {
  name: 'father',
  components: {
    son
  },
  data () {
    return {
      con: ''
    }
  }
}
</script>

<style lang="less" scoped>
</style>

• 子組件
  • 通過script屬性中的props進行接收自定義屬性名
    • props是單項數據流（只允許父—>子）
    • 可以直接進行傳值【父傳子】

<template>
  <div id="son">
    <h1>子組件</h1>
    <span>父傳子-子</span>
    <p>我是：{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: 'son',
  props: ['msg'],
  data () {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
</style>
   

2. 子—>父：

 **子：this.$emit('自定義事件名稱', 數據)  子組件標簽上綁定@自定義事件名稱='回調函數'**

 **父：methods: {  回調函數() {    //邏輯處理 }  }**

• 子組件
  • 首先在子組件綁定(事件)，並且定義一個函數，把子組件的值傳遞給父組件

<template>
  <div>
    <h1>子組件</h1>
    <span>子傳父-子</span>
    <!-- 雙向綁定到sonVal內 -->
    <input type="text" v-model="sonVal">
    <!-- 進行傳值操作 -->
    <input type="button" value="傳值到父元素" @click="sonClick">
  </div>
</template>

<script>
export default {
  data () {
    return {
      sonVal: 'yes!'
    }
  },
  methods: {
    sonClick () {
      // 利用$emit方法 把子組件的值傳遞給父元素
      this.$emit('mySonVal', this.sonVal)
    }
  }
}
</script>

<style lang="less" scoped>
</style>

• 父組件
  • 那么父組件在接收子組件的時候，@綁定的屬性mySonVal就是默認帶有參數的

<template>
  <div>
    <h1>父組件</h1>
    <span>子傳父-父</span>
    <input type="text" v-model="con">
    <son :val="name" @mySonVal="fatherHandle"></son>
  </div>
</template>

<script>
// 導入子組件
import son from '../components/sonToFatherSon'

export default {
  data () {
    return {
      con: ''
    }
  },
  components: {
    son
  },
  methods: {
    fatherHandle (con) {
      this.con = con
    }
  }

}
</script>

<style lang="less" scoped>
</style>

3. 兄弟之間：EventBus

1. 首先在main.js中定義一個EventBus

   Vue.prototype.$eventBus = new Vue();
   

2. 父組件

   • 導入兩個兄弟模板

3. 子組件兄弟1：數據發送方：$emit(“事件名稱”，“參數”)發送組件

   <template>
     <div>
       <h1>子組件 兄弟1</h1>
       <span>兄弟之間傳遞---</span>
       <input type="text" v-model="con" @change="handleChange(con)">
     </div>
   </template>
   
   <script>
   export default {
     data () {
       return {
         con: ''
       }
     },
     methods: {
       handleChange (val) {
         this.$eventBus.$emit('brotheronecome', this.con)
       }
     }
   }
   </script>
   
   <style lang="less" scoped>
   </style>
   

4. 子組件兄弟2：數據接收方：$on(“事件名稱”，“接收參數”)接收組件

   <template>
     <div>
       <h1>子組件 兄弟2</h1>
       <span>兄弟之間傳遞</span>
       <p>接收的參數為---{{text}}</p>
     </div>
   </template>
   
   <script>
   export default {
     data () {
       return {
         text: ''
       }
     },
     mounted () {
       this.$eventBus.$on('brotheronecome', (val) => {
         this.text = val
       })
     }
   }
   </script>
   
   <style lang="less" scoped>
   </style>