vue组件之组件间的通信

1.组件之间的通信

参考链接：https://www.cnblogs.com/xiaonq/p/9685234.html

​ https://www.cnblogs.com/lingdu87/p/9147555.html#top

---

1.1 父组件向子组件间的通信

1、组件间的通信说明

　　　　　　1. 组件间通信就是指组件之间是如何传递数据的
　　　　　　　　　　父组件：vue实例化对象
　　　　　　　　　　子组件：自定义组件

　　　　　　2. 组件的tempalte属性，除了可以是字符串，还可以是元素的id

　　　　　　3. 我们在页面中定义模板的时候，除了可以定义在script模板标签中，还可以定义在template模板中

　　　　　　父组件子组件：如果你在一个组件A里面，用到了另外一个组件B，那么B就是A的子组件，A就是B的父组件

　2、父组件向子组件通信：分为以下两步

　　　　1. 第一步

　　　　　　　　1. 在组件容器元素上，定义自定义属性，属性值可以传递父组件中的数据

　　　　　　　　2. 如果属性使用了v-bind指令，属性值就是js环境

　　　　　　　　3. 如果属性没有使用v-bind指令，属性值就是字符串

　　　　　　　　 # hello 是字符串， msg是变量

　　　　2. 第二步

　　　　　　　　1. 在组件中定义props属性，属性值是数组，每一个成员代表组件容器元素上的一个属性

　　　　　　　　2. 作用：将属性作为变量，注册在子组件中，可以在子组件中使用（包括模板）

　　　　　　　　3. 注意: 如果属性名称，出现了-， 注册的变量要使用驼峰式命名法

​ 3、例子说明

1. 在当页面中注册了子组件：Ickt，在子组件中是无法使用父组件中定义的数据 msg 的
2. 如果想要在子组件Ickt中使用父组件的 msg 变量，可以使用 <ickt v-bind:parent-msg="msg">
3. 在子组件中 使用{{parent-msg}} 就可以访问父组件的msg变量了

​ 父组件代码如下：

<template>
    <div>
      <h2>{{ msg }}</h2>
         <!--3.第三步：把父组件的某一个属性传递给子组件 psMsg是名字-->
      <son :psMsg="父传子的内容:我是父组件"></son> <!-- 子组件绑定psMsg变量-->
  </div>
  </template>

  <script>
  import son from './Son' //1.第一步 在父组件中引入子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
      }
    },
      //2.第二步：在父组件中注册子组件
    components:{son},       
  }
  </script>

子组件的代码如下：

<template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
      }
    },
      //子组件要使用父组件的数据，只需要一步，在props中接收父组件的属性
    props:['psMsg'], // 接收父组件传来的psMsg值
  }
</script>

1.2 子组件向父组件通信

　1、1.0中子组件向父组件通信分以下两步

　　　　1. 第一步：注册事件

　　　　　　　　在父组件的events属性中 注册消息，参数就是触发是传递的数据，作用域是组件实例化对象

　　　　2.第二步：触发事件

　　　　　　　　在子组件中，通过$dispatch方法触发消息

　　2、2.0中改变 　

• ​ 将$dispatch, (broadcast 移除了，新增了)emit, $on, $off

  　　　　　　　　　　$emit发布消息

  　　　　　　　　　　(on 注册消息： 参数就是)emit传递的数据，作用域就是组件实例化对象

  　　　　　　　　　　$off 注销消息

• 　 每一个组件相当于一个事件对象，只能在自身订阅，触发，以及发布

• ​ 注意：工作中，注册事件通常在组件生命周期方法中注册，例如created

父组件代码如下：

<template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <p>父组件接手到的内容：{{ username }}</p>
      <!--把父组件的一个方法传递给子组件-->
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>  <!--绑定自定义事件transfer-->
    </div>
  </template>
  <script>
  import son from './Son'      //1.第一步 在父组件中引入子组件
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
      }
    },
    components:{son},      //2.第二步：在父组件中注册子组件
    methods:{
      //3.第三步：在父组件中定义一个getUser方法 可以在子组件中触发并传值给父组件
      getUser(msg){      //msg是接收的子组件中传递的数据
        this.username= msg
      }
    }
  }
  </script>

子组件son代码如下：

 <template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
    </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)//将值绑定到transfer上传递过去
      }
    }
  }
  </script>

1.3通过Vuex状态管理传值

---

1.通过npm加载vuex，创建store.js文件，然后在main.js中引入，store.js文件代码如下:

 import Vue from 'vue'
 import Vuex from 'vuex'

  Vue.use(Vuex);
  const state = {
    author:'Wise Wang'
  };
  const mutations = {
    newAuthor(state,msg){
      state.author = msg
    }
  }
  export default  new Vuex.Store({
    state,
    mutations
  })

2.父组件parent代码如下：

 <template>
    <div class="parent">
      <h2>{{ msg }}</h2>
      <p>父组件接手到的内容：{{ username }}</p>
      <input type="text" v-model="inputTxt">
      <button @click="setAuthor">传参</button>
      <son psMsg="父传子的内容:叫爸爸" @transfer="getUser"></son>
    </div>
  </template>
  <script>
  import son from './Son'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '父组件',
        username:'',
        inputTxt:''
      }
    },
    components:{son},
    methods:{
      getUser(msg){
        this.username= msg
      },
      setAuthor:function () {
        this.$store.commit('newAuthor',this.inputTxt)
      }
    }
  }
  </script>

3.子组件son代码如下：

  <template>
    <div class="son">
      <p>{{ sonMsg }}</p>
      <p>子组件接收到内容：{{ psMsg }}</p>
      <p>这本书的作者是：{{ $store.state.author }}</p>
      <!--<input type="text" v-model="user" @change="setUser">-->
      <button @click="setUser">传值</button>
      </div>
  </template>
  <script>
  export default {
    name: "son",
    data(){
      return {
        sonMsg:'子组件',
        user:'子传父的内容'
      }
    },
    props:['psMsg'],
    methods:{
      setUser:function(){
        this.$emit('transfer',this.user)
      }
    }
  }
  </script>