VUE常用的通信方式

vue组件传值方式：
vue的组件传值分为三种方式：父传子、子传父、非父子（同级）组件传值。引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

1、父传子（父组件传子组件）

子组件代码：

<template>
    <div id="container">
        {
   
   {msg}}
    </div>
</template>
<script>
 export default {
   data() {
     return {};
   },
   props:{
     msg: String
   }
 };
</script>

父组件代码：

<template>
     <div id="container">
         <input type="text" v-model="text" @change="dataChange">
         <Child :msg="text"></Child>
     </div>
</template>
<script>
 import Child from "@/components/Child";
 export default {
   data() {
     return {
       text: "父组件的值"
     };
   },
   methods: {
     dataChange(data){
         this.msg = data
     }
   },
   components: {
     Child
   }
 };
</script>

总结：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed

2、子传父（子组件传父组件）

子组件代码：

<template>
     <div id="container">
         <input type="text" v-model="msg">
         <button @click="setData">传递到父组件</button>
     </div>
</template>
<script>
 export default {
   data() {
     return {
       msg: "传递给父组件的值"
     };
   },
   methods: {
     setData() {
       this.$emit("getData", this.msg);
     }
   }
 };
</script>

父组件代码：

<template>
     <div id="container">
         <Child @getData="getData"></Child>
         <p>{
   
   {msg}}</p>
     </div>
</template>
<script>
 import Child from "@/components/Child";
 export default {
   data() {
     return {
       msg: "父组件默认值"
     };
   },
   methods: {
     getData(data) {
       this.msg = data;
     }
   },
   components: {
     Child
   }
 };
</script>

总结：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。

总结：
1、子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2、将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3、在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3、非父组件之间传值

方法一：
（1）建立一个公共的通信组件(Vue)，需要传值的组件里引入该通信组件
（2）在一个中绑定一个事件this.on('eventname', this.id)
（3）在另一个组件中触发事件this.$emit('eventname',( options)=>{})
方法二：
在本地存储中添加公共数据，可以在两个页面中获取、更改