组件之间的通信

最新推荐文章于 2022-11-20 11:18:00 发布

weixin_45989924

最新推荐文章于 2022-11-20 11:18:00 发布

阅读量307

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45989924/article/details/117488430

版权

组件之间的通信

1.组件之间为什么要通信？

默认情况下，组件只能使用自己的data,兄弟组件或者父子组件之间，都不会互相使用对方data中的数据。但是，在实际项目中，我们经常会需要组件和组件之间进行数据传递，所以，在Vue中组件间的通信是非常重要的

2.组件间通信的方式

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：
在这里插入图片描述
如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、 $e m i t /$ on、vuex、$parent / $c h i l d r e n 、$ attrs/$listeners和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。

方法一、父子组件通信props/$emit

父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:[“Henry”,“Bucky”,“Emily”]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}

//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

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

2.子组件向父组件传值（通过自定义事件形式）

接下来我们通过一个例子，说明子组件如何向父组件传递值：实现子组件向父组件值的传递。要使用自定义事件来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 自定义事件的流程：
在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。 -->
    <div id="app">
        <cpm-1 :name="name" @father="changename"></cpm-1>
        <!-- //第二步：在子组件中传递事件 -->
    </div>
    <template id="cpm-1">
        <div>
            <h1>组件模板抽离</h1>
            <h1>{{name}}</h1>
            <!-- //第三步：在子组件中通过去触发和调用自定义事件 -->
            <!-- //第四步：传值如果子组件要向父组件传值@click='$emit("father","王五")'方法后添加需要传递到父级的数据 -->
             <button  @click="change"></button>
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        
        Vue.component("cpm-1",{//cpm-1对应上面的模板id,
            template:"#cpm-1",
            props:["name"],//props为一个数组，接收传过来的数据,props也可以为一个对象
            data(){
                return{
                    age:"12"
                }
            },
            methods:{
              
                change(){
                    //在子组件中，通过$emit()来触发事件
                   this.$emit("father",this.age)
                }
            }
            
        })
new Vue({
    el:"#app",
    data(){
                return{
                    name:"张三"
                }
            },
            methods: {
                  //第一步：在父组件中自定义事件
                // 在父组件中，通过v-on来监听子组件事件。
                changename(age){//第五步：修改父组件的数据
                    console.log("传参",age);
                    this.name=age
                }
            },
})
    </script>
</body>
</html>

方式二：兄弟组件通信

Bus；Vuex

方式三：跨级组件通信

Bus；Vuex；provide / inject API、 $a t t r s /$ listeners
详情点击链接：https://segmentfault.com/a/1190000019208626

weixin_45989924

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
组件之间的通信

组件之间的通信1.组件之间为什么要通信？默认情况下，组件只能使用自己的data,兄弟组件或者父子组件之间，都不会互相使用对方data中的数据。但是，在实际项目中，我们经常会需要组件和组件之间进行数据传递，所以，在Vue中组件间的通信是非常重要的2.组件间通信的6种方式组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，
复制链接

扫一扫