Vue中组件的通信方式

syl~

已于 2022-08-04 11:36:25 修改

阅读量184

点赞数

分类专栏： vue 文章标签： javascript vue.js

于 2020-11-07 20:59:37 首次发布

本文链接：https://blog.csdn.net/syl19980202/article/details/109296388

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue中组件的通信方式

Vue中的通信方法分类:

父=>子 ---- props，v-slot, $attrs, vueX, provide/inject
子=>父 ---- $emit, $listeners, vueX
无直接联系的组件通信
vuex
借助路由传参localStorage/sessionStorage等

1.props父传子(属性传递 )

父组件向子组件传递数据时, 通过属性传递数据：
1. 父组件中: 用属性绑定, 进行数据传递. :search-text=“111”, 一般在父组件中引用子组件时会这样用;
2. 子组件中: 用 props 接收数据; 例如: props: { search-text }
3. 通过props传递的数据，父组件中改变的同时，子组件中传入的该数据也会跟着改变，且通过props传递的数据在子组件中不能直接更改(否则会报错);
例如: 把在父组件输入框中绑定的数据通过props传递给子组件, 那么在父组件输入框中输入值的同时，子组件中的数据也会同步变化;
4. 代码示例:

父组件中代码:

<template>
  <div>
    <el-input v-moddel="value" placeholder="请输入内容"></el-input>
    // 引入子组件
    <search-result :input="value"></search-result>
    // 父组件中通过v-bind绑定数据的方法，把父组件中的数据传递给子组件，此处的input是进入子组件后要显示的数据名称，value是父组件要传递的数据;
  </div>
</template>

<script>
  // 导入 SearchResult 子组件
  import SearchResult from './components/search-result'

  export default {
    name: 'SearchPage',
    components: {
      // 注册子组件
      SearchResult
    },
    data () {
      return {
        // 搜索框的内容 
        value: ''
      }
    },

子组件中代码:

<template>
  <div>
    {{ input }}
  </div>
</template>
export default {
    name: 'SearchResult',
    // 注意: 通过props传递到子组件中的值，在子组件中不能修改，否则会报错;
    props: {
      input: {
        type: String,
        default: ''
      }
    },

父向子传值步骤:
1. 在父组件中的子组件标签中进行属性绑定;(父组件中要先引用子组件, 且在components中注册子组件),父组件要传递给子组件的数据要先在data中注册;
2. 在子组件中用 props 接收父组件中传递过来的数据;
  注意: 子组件中通过props获取到的数据不能修改;
  props只能用于父向子传值;

2.子传父($emit)

使用组件时，所有的属性名和事件名都是子组件的, 属性值和事件方法都是父组件的;
（即在子组件中只定义属性名和事件名, 在父组件中定义属性值和事件方法；）

vm.$on绑定事件; vm. $once绑定一次; vm. $off解绑事件； vm. $emit触发事件;
给父亲绑定一些事件, 儿子触发事件时将数据传递过去;
单向数据流，子组件中的数据值发生改变，父组件中的数据也会跟朕改变;
属性值（方法）是父亲的，属性是儿子的(自定义属性/事件名）

子组件: 

<template>
    <div class="app">
    // 1. 注册方法
       <el-input @key-up="sendMsg" v-model="value"></el-input>
    </div>
</template>
<script>
export default {
 
    data () {
        value: ''
    },
     methods:{
        // 2. 注册父组件中要用到的自定义事件的事件名和要传递给父组件的数据
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.value:子组件给父组件传递的数据
             this.$emit('func', this.value)
         }
     }
}
</script>

父组件:

<template>
    <div class="app">
    // 3. 利用子组件传递过来的方法建立事件
        <child @func="getMsgFormSon"></child>
        <p>{{ msgFormSon  }}</p>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
      // 4. 在父组件中建立事件   
      getMsgFormSon(data){
        this.msgFormSon = data
     }
    }
}
</script>

子传父的步骤:

在子组件中给某元素定义一个事件, 例如：@click=“sendMsgToParent” ;
在子组件响应上面（1中的事件）的事件时, 使用$emit来触发一个自定义事件, 并传递一个参数。例如： sendMsgToParent：function () {
this. $emit(‘listenToChildEvent’, ’ this message is from child’)
}
在父组件的子标签(引用的子标签)中, 监听该自定义事件，并添加一个响应该事件的处理方法。<child ：listenToChildEvent=“showMsgFormChild”>
methods: {
showMsgFormChild: function (data) {
console.log(data)
}
}

3. v-slot父传子(通过插槽实现父传子)

在父组件中引入子组件，在引入的子组件中设置插槽，并放入要在子组件的插槽中展示的数据;
在子组件中接收插槽，即可展示父组件中的数据;
通过插槽传递给子组件的数据，不能在子组件中直接拿到，只能展示;

  注意: prop的参数传递方是设置插槽的文件, prop的参数接收方是使用插槽的文件;
  1. 需要传递prop的具名插槽写法:
     <template v-slot:插槽名称="{ 需要用prop传递的数据名称 }">...</template>
  2. 需要接收prop的默认插槽写法:
     <插槽名 v-slot:{x, y}>...</插槽名>
     v-slot:{x, y}使用解构获取传递的数据
  3. 不需要传递prop的具名插槽写法:
     <template slot="插槽名称">...</template>

父组件:

<template>
  <div>
    <child>
      <template v-slot:childSlot>
        <!-- 插槽要展示的内容 -->
        {{ slotName }}
      </template>
   </child>
  </div>
</template>

子组件:

<template>
  <div>
    <!-- 具名插槽 -->
    <p>通过v-slot具名插槽实现父传子</p>
    <slot name="childSlot"></slot>
  </div>
</template>

<script>
export default {
  name: 'Child'
}
</script>

4. $refs $parent $children $root

$refs：我们通常会将 $refs绑定在DOM元素上，来获取DOM元素的 attributes。在实现组件通信上，我们也可以将 $refs 绑定在子组件上，从而获取子组件实例。
$ parent：我们可以在 Vue 中直接通过this.$parent来获取当前组件的父组件实例（如果有的话）。
$children：同理，我们也可以在 Vue 中直接通过this. $children来获取当前组件的子组件实例的数组。但是需要注意的是，this. $children数组中的元素下标并不一定对用父组件引用的子组件的顺序，例如有异步加载的子组件，可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
$root：获取当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。通过 $root ，我们可以实现组件之间的跨级通信。
父向子传值：子组件通过$ parent.message获取到父组件中message的值。
子向父传值：父组件通过$ children获取子组件实例的数组，在通过对数组进行遍历，通过实例的 name 获取到对应 Child1 子组件实例将其赋值给 child1，然后通过child1.message获取到 Child1 子组件的message。

// 子组件
<template>
  <div class="child">
    <h4>this is child component</h4>
    <input type="text" v-model="message" />
    <p>收到来自父组件的消息：{{ $parent.message }}</p>  <!--展示父组件实例的message-->
  </div>
</template>
<script>
export default {
  name: 'Child1',
  data() {
    return {
      message: '',   // 父组件通过this.$children可以获取子组件实例的message
    }
  },
}
</script>

// 父组件
<template>
  <div class="parent">
    <h3>this is parent component</h3>
    <input type="text" v-model="message" />
    <p>收到来自子组件的消息：{{ child1.message }}</p> <!--展示子组件实例的message-->
    <Child />
  </div>
</template>
<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '',
      child1: {},
    }
  },
  components: {
    Child,
  },
  mounted() {
    this.child1 = this.$children.find((child) => {
      return child.$options.name === 'Child1'  // 通过options.name获取对应name的child实例
    })
  },
}
</script>

4. $attrs 和 $listeners

$ attrs：用来接收父作用域中不作为 prop 被识别的 attribute 属性，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

试想一下，当你创建了一个组件，你要接收 param1 、param2、param3 …… 等数十个参数，如果通过 props，那你需要通过props: [‘param1’, ‘param2’, ‘param3’, ……]等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递，那将会更加麻烦。

而使用 $ attrs ，你不需要任何声明，直接通过$ attrs.param1、$attrs.param2……就可以使用，而且向深层子组件传递上面也给了示例，十分方便。

$ listeners：包含了父作用域中的 v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建更高层次的组件时非常有用，这里在传递时的使用方法和 $attrs 十分类似。
代码实例:
在这个实例中，共有三个组件：A、B、C，其关系为：[ A [ B [C] ] ]，A为B的父组件，B为C的父组件。即：1级组件A，2级组件B，3级组件C。我们实现了：

父向子传值：1级组件A通过:messageFromA="message"将 message 属性传递给2级组件B，2级组件B通过$ attrs.messageFromA获取到1级组件A的 message 。
跨级向下传值：1级组件A通过:messageFromA=“message"将 message 属性传递给2级组件B，2级组件B再通过v-bind=”$ attrs"将其传递给3级组件C，3级组件C通过$ attrs.messageFromA获取到1级组件A的 message 。
子向父传值：1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过v-on=”$ listeners"来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时，便会触发1级组件A的receive回调，将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现子向父传值。
跨级向上传值：1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听，2级组件B在通过将其继续传递给C。3级组件C在通过v-on=”$listeners"来将 keyup 事件绑定在其 input 标签上。当3级组件C input 输入框输入时，便会触发1级组件A的receive回调，将3级组件C的 input 输入框中的值赋值给1级组件A的 messageFromComp ，从而实现跨级向上传值。

4.兄弟组件的传值

兄弟组件之间传递数据需要通过事件车。事件车作为兄弟组件间的桥梁，创建一个vue实例，让各个兄弟通过公用同一个时间机制;
传递数据方：通过一个事件触发bus.$emit(方法名, 传递的数据);
接收数据方: 通过mounted触发bus.$on方法；
步骤:
- 新建bus文件，导入vue实例

// 传值方: 
import bus from '@/utils/bus'
// import bus from '具体路径'
...
bus.$emit('clickChart', { params: params, data: that.dataList })
// bus.$emit('接收方要用到的函数名', 要传递的数据)

// 接收方:
import bus from '@/utils/bus'
// import bus from '具体路径'
...
bus.$on('clickChart', this.clickChart)
// bus.$on('传值方定义的函数名', 接收/转化数据的函数)
clickChart(val) {}
// val: 代表传值方传递过来的数据

5. provide/inject依赖注入

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，只要是父子孙关系的组件，始终生效。

provide

provide：是一个对象，或者是一个返回对象的函数。该对象包含可注入其子孙的 property ，即要传递给子孙的属性和属性值。

inject

injcet：一个字符串数组，或者是一个对象。当其为字符串数组时，使用方式和props十分相似，只不过接收的属性由data变成了provide中的属性。当其为对象时，也和props类似，可以通过配置default和from等属性来设置默认值，在子组件中使用新的命名属性等。

代码实例:

这个实例中有三个组件，1级组件A，2级组件B，3级组件C：[ A [ B [C] ] ]，A是B的父组件，B是C的父组件。实例中实现了：

父向子传值：1级组件A通过provide将message注入给子孙组件，2级组件B通过inject: [‘messageFromA’]来接收1级组件A中的message，并通过messageFromA.content获取1级组件A中message的content属性值。
跨级向下传值：1级组件A通过provide将message注入给子孙组件，3级组件C通过inject: [‘messageFromA’]来接收1级组件A中的message，并通过messageFromA.content获取1级组件A中message的content属性值，实现跨级向下传值。

1级组件A：

// 1级组件A
<template>
  <div class="compa">
    <h3>this is A component</h3>
    <input type="text" v-model="message.content" />
    <CompB />
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  provide() {
    return {
      messageFromA: this.message,  // 将message通过provide传递给子孙组件
    }
  },
  data() {
    return {
      message: {
        content: '',
      },
    }
  },
  components: {
    CompB,
  },
}
</script>

2级组件B：

// 2级组件B
<template>
  <div class="compb">
    <h4>this is B component</h4>
    <p>收到来自A组件的消息：{{ messageFromA && messageFromA.content }}</p>
    <CompC />
  </div>
</template>
<script>
import CompC from './compC'
export default {
  name: 'CompB',
  inject: ['messageFromA'], // 通过inject接受A中provide传递过来的message
  components: {
    CompC,
  },
}
</script>

3级组件C：

// 3级组件C
<template>
  <div class="compc">
    <h5>this is C component</h5>
    <p>收到来自A组件的消息：{{ messageFromA && messageFromA.content }}</p>
  </div>
</template>
<script>
export default {
  name: 'Compc',
  inject: ['messageFromA'], // 通过inject接受A中provide传递过来的message
}
</script>

注意点：

上面1级组件A中的message为什么要用object类型而不是string类型，因为在vue provide 和 inject 绑定并不是可响应的。如果message是string类型，在1级组件A中通过input输入框改变message值后无法再赋值给messageFromA，如果是object类型，当对象属性值改变后，messageFromA里面的属性值还是可以随之改变的，子孙组件inject接收到的对象属性值也可以相应变化。
子孙provide和祖先同样的属性，会在后代中覆盖祖先的provide值。例如2级组件B中也通过provide向3级组件C中注入一个messageFromA的值，则3级组件C中的messageFromA会优先接收2级组件B注入的值而不是1级组件A。

syl~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中组件的通信方式

Vue中的通信方法组件间的通信父传子(属性传递)父组件向子组件传递数据时, 通过属性传递数据：1. 父组件中: 用属性绑定, 进行数据传递. ==注意: == son 指：子组件的名称，例如：一般在父组件中引用子组件时会这样用;2. 子组件中: 用 props 接收数据; 例如: props: { search-text }3. 代码示例:父组件中代码:...
复制链接

扫一扫