Vue communication between components

Communication between father and son Components

Parent components pass data to subassembly

Step 1: In datathe value defined to be delivered

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

Step 2: property values ​​bound to the label subassembly template, to be delivered to bind

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

Step 3: receive the props in this case the data can be used normally been

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

Step 4: Display or

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

Data transmission subassembly to the parent component

Step 1: In datathe value defined to be delivered

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

Step 2: This is to demonstrate, by getting the value input is performed manually by clicking on emitthe actual business according to the demand to handle dataemit

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

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

Step 3: Parent receiving component listens

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

Receiving in the processing methods

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

Call the parent component properties and methods subcomponents

Vue by the refproperties and methods to call sub-assembly, this corresponding to the template reference variable Angualr incorporated@viewchild

Step 1: Add the component on the notes refand name (do not know whether it is reasonable to say)

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

Method subassembly

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

Step 2: the processing methods used in the parent assembly

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

Non-communication between father and son Components

Non-communication between father and son must rely on components vuex, this corresponds to Angular of serviceservice

Step 1: here directly attached to storethe entire code

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

Step 2: Components 1 and processing value defined to be delivered

<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);
    }
 }

Step 3: Which components want to go storeto find the

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

This can be as follows

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

Note that it is not recommended to directly call mutationsmethods for data manipulation, does not meet the vuex design ideas, using the data should be accessed stateas if directly by calling the mutationsongoing method of stateoperating data, then the problem is caused by: If there are other places such operation, when the time changes in data, it is difficult to locate in the end part of the operation which led to the

This conventional method is non-parent-child communication components, as well as some of the Sao operations such as those carried out by routing, session, localStorage, sessionStorage, as long as your brain big hole, these are hard to say. Angular is also the same.