组件间的通信

2024-04-11 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 组件间的通信

前言：组件间的通信，总是词不达意，过眼就忘，因此利用休息时间做了如下总结
举例：祖-父-子分别为：App.vue——>Content.vue——>Hello.vue

@[toc]

传值

1、父传子

父组件：<Header :msg="msg"></Header>
子组件：props:[;msg] 或 props:{ mag:string }

通过props传

父组件通过props向下传递数据给子组件。

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

//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:String,//类型
      default:"你好",//设置默认值
      required:true//设置为必传值
    },
    list:{
   
   //对象或数组的默认值必须从一个工厂函数返回
        type:Array,
        default(){
   
   
            return []
        }
    }
  }
}
</script>

2、子传父

子组件：this.$emit("自定义事件名称"，要传的数据)
父组件：

<Header @click="getVal"></Header>
methods:{
    
    
   getVale(msg){
    
    
   // msg 就是子组件传递的数据
   }
}

通过自定义事件传值，通过$emit来触发事件

在这里插入图片描述

3、兄弟组件传值

在这里插入图片描述

父子组件的访问方式

1、父组件访问子组件中的数据

通过$refs拿值
在这里插入图片描述

2、子组件访问父组件中的数据

通过$parent拿值，但尽量少用，因为组件的复用性高，parent可能一直在变化
通过$root拿到根组件的值

跨级通信

祖父组件通过provide提供值，子组件通过inject拿取到值
在这里插入图片描述