vue组件间通讯

父子组件间通讯

父组件向子组件传递数据

步骤1：在data中定义要传递的值

data() {
    return {
      msgData: { name: "张三", age: 18 }
    };
},

步骤2：在模板中的子组件的标签上进行属性绑定，将要传递的值进行绑定

<!--父组件模板-->
<template>
  <div class="home">
    <!-- 父组件向子组件传值 -->
    <!-- 
      1：要传递的值可以没有双引号，加双引号也没有错 
      2：如果要传的值是非字符串，那么必须是标准的属性绑定要加v-bind或者简写形式
        如果是字符串可以省略v-bind或者简写方式，要注意的是传递的字符串必须是在标签中值的方式写
        (这种貌似叫做静态传值和非静态传值)
    -->
    <HelloWorld :msg="msgData"/>
    <!-- <HelloWorld msg="wellcome to your application" /> -->
  </div>
</template>

步骤3：在props中进行接收，此时数据就已能正常使用

 props: {
    // 对于接收父组件传过来的值，Vue相对来说比较严谨，传什么类型的值就用什么类型来接收，而且必须有类型，否则报错
    msg: Object
 },

步骤4：使用或者展示

<h1>父组件传过来的值：{{ msg.name }}</h1>

子组件往父组件传递数据

步骤1：在data中定义要传递的值

data() {
    return {
      toParentValue: ""
    };
},

步骤2：这里是为了演示，通过获取input的值，通过点击手动进行emit，实际业务中根据需求处理好数据后进行emit

<!--子组件模板中-->
 <input type="text" placeholder="这里是要往父组件传的值" v-model="toParentValue" />
 <button @click="sendToHomeComponent()" class="btn">发送</button>

 methods: {
    sendToHomeComponent() {
      //emit的第一个参数是事件名，父组件会根据事件定义接收方法，第二个参数是要传递的参数
      this.$emit("toParent", this.toParentValue);
    }
 }

步骤3：父组件进行监听接收

<!--父组件模板-->
<template>
  <div class="home">
    <!-- 
      方法可以不加括号，但如果加了括号，对于子组件传过来的值，必须要添加$event参数
     -->
    <HelloWorld :msg="msgData" @toParent="getMessage($event)"/>
  </div>
</template>

在methods中进行处理接收

 methods:{
    getMessage(e){
      //定义变量进行接收
      this.reciveValue=e;
    }
 }

父组件调用子组件的属性和方法

Vue通过ref来调用子组件的属性和方法，这个对应Angualr中的模板引用变量结合@viewchild

步骤1：在组件的便签上添加ref并命名(不知道这么说是否合理)

<!--父组件模板-->
<template>
  <div class="home">
  	<button @click="getChildFunction()" class="btn">调用子组件的方法</button>
    <HelloWorld :msg="msgData" @toParent="getMessage($event)" ref="helloword"/>
  </div>
</template>

子组件中的方法

methods: {
    refTest() {
      console.log("我是子组件的方法");
    }
}

步骤2：在父组件的methods中处理使用

 methods:{
    getChildFunction(){
      // 通过$refs对象拿到子组件实例，然后拿到子组件的方法
      this.$refs.helloword.refTest()
    }
 }

非父子组件间通讯

非父子组件间通讯就要依靠vuex了，这个对应Angular中的服务service

步骤1：这里直接贴store全部代码

export default new Vuex.Store({
  // 公共的状态
  state: {
    message:""
  },
  // 相当于methods，更改store的状态
  //mutations中的方法只能传两个参数，并且第一个参数是固定的就是state,第二个参数才是组件传的参
  mutations: {
    setMessage:(state,value)=>{
      state.message=value;
    },
    getMessage:(state)=>{
      return state.message;
    }
  }
})

步骤2：组件1中定义并处理要传递的值

<input type="text" v-model="toOtherComponent" placeholder="这里是向非父子关系组件传值">
<button @click="sentToOtherComponent()" class="btn">传值</button>

 methods:{
    sentToOtherComponent(){
      //要使用mutations中的方法需要通过$store的commit进行
      //commit第一个参数是要调用的方法名，第二个是要传的参数
      //要注意的是传参只能传一个，如果是多个参数那就放到数组或对象中进行传参
      this.$store.commit("setMessage",this.toOtherComponent);
    }
 }

步骤3：哪个组件想用就去store中找

<span>直接读取state的值：{{$store.state.message}}</span>

也可以如下这样

 methods: {
    getMessageFromStore() {
      console.log(this.$store.state.message);
    }
 }

注意的是不推荐直接调用mutations中的方法进行数据操作，不符合vuex的设计思想，使用数据应该访问的是state，因为如果直接通过调用mutations中的方法进行state中的数据的操作，那么带来的问题是：如果还有其他地方也这么操作，到时候数据的变动就很难去定位到底是哪个部分操作导致的

这是非父子组件通讯的常规方法，还有一些骚操作比如通过路由、session、localStorage、sessionStorage这些进行，只要你脑洞大，这些都好说。Angular中也是一样的。