Vue的组件传参

Vue的组件传参分为：

        父子传参、子父传参、兄弟传参、事件总线/事件车(EventBus)、Vuex。

1.父子传参

        父元素将值通过自定义属性传递给子元素，子元素通过props:['属性名']接收父元素传递过来的值。

2.子父传参

        Vue的设计是单向数据流，理论上只允许父组件向子组件传递数据。想通过子组件向父组件传参必须是父元素传递一个事件给子组件，子组件通过父组件传递的方法进行传参,主要使用$emit('事件名',参数)。

//父组件App.vue
<template>
    <div>
        //在子组件绑定一个自定义事件名但是不能与系统事件重名
        <son @goSon="receiveMsg"/>
        <span>收到子组件传递的参数:{{num}}</span>
    </div>
</template>
<script>
import MyCom from './components/MyCom.vue'
  export default {
  components: { Son },
    data(){
        return{
            num:'' //用于接收子元素传递的信息
        }
    },
    methods: {
      receiveMsg(msg) {
        console.log('子传入的信息:', msg);
        this.num =msg
      }
    },
}
</script>

//子组件:Son.vue
<template>
    <div>
        <button @click="chooseNum(1)">传参</button>
    </div>
</template>
<script>
     export default {
        methods: {
          chooseNum(num){
            //1.父元素需要传递一个方法给子元素
            //父元素: @suibian="receiveMsg"
            //2.子元素利用父元素传递的方法 来传递信息给父元素
            // 使用 $emit 来触发自定义事件
            // 参数1: 事件名
            // 参数2: 传递给事件中绑定方法的 参数
            this.$emit('receiveMsg', num)
         }
        },
    }
</script>

        还有一种官方不推荐的方案：通过子元素的 this.$parent.要传递的参数 同样可以传递至父元素

3.兄弟传参

        兄弟传参依赖于父组件，兄弟A将参数传递给父，父将参数传递给兄弟B。

        创建子组件1   FirstCom.vue

<template>
  <div class="first-com"> 
    <h1>第一个组件</h1>
    <input type="text" v-model="num">
    <button @click="doSure">传递</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        num: ''
      }
    },
    methods: {
      doSure() {
        //简单方式--不推荐
        // this.$parent.first_kw = this.num
        // 优雅方式 -- 通过父传递的方法进行传参
        this.$emit('sendMsg',this.kw)
      }
    },
  }
</script>

<style lang="scss" scoped>
.first-com{
  background-color: green;
  min-height:200px
}
</style>

        创建子组件2   SecondCom.vue

<template>
  <div class="first-com"> 
    <h1>第一个组件</h1>
    <p>来自父元素的传参：{{kw}}</p>
  </div>
</template>

<script>
  export default {
    props:['kw']
  }
</script>

<style lang="scss" scoped>
.first-com{
  background-color: blue;
  min-height:200px
}
</style>

        父组件为App.vue

<template>
  <div>
    <p>来自子元素firstCom的值：{{first_kw}}</p>
    <first-com @sendMsg="receiveMsg"/>
    <second-com :kw="first_kw"/>
  </div>
</template>

<script>
import FirstCom from './components/FirstCom.vue'
import SecondCom from './components/SecondCom.vue'
  export default {
  components: { FirstCom, SecondCom },
    data() {
      return {
        first_kw: '', //来自子元素firstCom的值
      }
    },
    // 优雅的 子传父 ： 1.父声明方法传递给子 2.子调用父传入的方法
    methods: {
      receiveMsg(msg) {
        this.first_kw = msg
      }
    },
  }
</script>

4.事件总线/事件车

        在需要传递参数的组件中通过$root.$emit('自定义的名称',要传递的参数)来向外发布消息。

<template>
  <div>
    <button @click="chooseNum(1)">One</button>
    <button @click="chooseNum(2)">Two</button>
    <button @click="chooseNum(3)">Three</button>
  </div>
</template>

<script>
  export default {
    methods: {
      chooseNum(num) {
        console.log('this:', this);
        // this.$root: 是所有组件的根
        // 在 $root 中向外发布消息, 就可以被所有的组件接收到
        // 参数1: 自定义的值, 随便写
        // 参数2: 与参数1名称绑定的相关信息
        this.$root.$emit('哈哈', {msg:"消息内容", num})
      }
    },
  }
</script>

        需要接收参数的组件通过$root.$on('发送消息组件自定义的名称',msg=>{在这处理接收到的消息})监听消息，接收完毕后在组件销毁前beforeDestroy中关闭监听$root.$off('自定义名称')。

<template>
  <div>
    <!-- 事件车: Event Bus -->
    <!-- 可以实现: 任意关系的多个组件间的消息传递 -->
    <my-com-bus/>
  </div>
</template>

<script>
import MyComBus from './components/MyComBus.vue'
  export default {
  components: { MyComBus },
    mounted () {
      // 监听 根元素 $root 中发送的消息
      // 参数1: 要听的消息名
      this.$root.$on('哈哈', function (data) {
        // data: 就是 $emit('哈哈', 具体数据data)
        console.log('收到的具体信息:', data);
      })
    },
    beforeDestroy () {
      // 通常: 在销毁前会 关闭监听
      this.$root.$off('哈哈')
    },
  }
</script>

5.Vuex

参考Vuex核心属性。