组件通信$refs | $parent |$root

父组件传值子组件用Props

子组件传值父组件用$emit

父组件直接还可以直接取子组件的值用$refs

父组件直接从子子组件中获取值$refs

不建议使用会增加组件之间的耦合度,一般用于第三方插件的封装

ref如果绑定在dom节点上,拿到的就是原生dom节点。

ref如果绑定在组件上,拿到的就是组件对象,可以实现通信功能

父组件

html 复制代码
<template>
  <div>
    <button v-on:click="handelClick">打印看看</button>
    <ChildModule ref="mychild"></ChildModule>
    <input type="text" ref="myinput">
    <div type="text" ref="mydiv">wowo</div>
  </div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {
  inheritAttrs: false,
  data() {
    return {
 
    }
  },
  components: {
    ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule
  },
  methods: {
    handelClick() {
      console.log(this.$.refs.myinput);
      console.log(this.$.refs.mydiv);
      console.log(this.$.refs.mychild);
 
      this.$.refs.myinput.value="abc";
      this.$.refs.mydiv.style.background='red'; //
      
      this.$refs.mychild.user.name="李四"; //直接获取子组件的user.name值并重新赋值
    }
  }
}
</script>

子组件

html 复制代码
<template>
    <div>
       {{user.name}}
    </div>
</template>
<script>
export default {
  data(){
    return{
        user:{
            name:"张三",
            age:19,
            emial:"abc@123.com"
        }
    }
  },
  methods:{
  
  }
}
</script>

子组件直接从父组件中获取值$parent

子组件直接从根组件中获取值$root

我有三个组件关系如下:根组件app.vue中有一个AChild组件,AChild组件中有一个BChild组件

根组件app.vue

html 复制代码
<template>
  <div>
    <AChild></AChild>
  </div>
</template>
<script>
import AChild from "./components/AChild.vue" //导入AChild组件模板
export default {
  inheritAttrs: false,
  data() {
    return {
      name: "我是根组件name"
    }
  },
  components: {
    AChild
  },
  methods: {
  }
}
</script>

AChild组件

html 复制代码
<template>
    <div>
        <BChild></BChild>
    </div>
</template>
<script>
import BChild from "./BChild.vue" //导入BChild组件模板
export default {
    inheritAttrs: false,
    data() {
        return {
            name: "我是A组件name"
        }
    },
    components: {
        BChild

    },
    methods: {

    }
}
</script>

BChild组件

html 复制代码
<template>
    <div>
        <button @click="handelClick">点我</button>
    </div>
</template>
<script >
export default{
    inheritAttrs:false,
    methods:{
        handelClick(){
           console.log( this.$parent.name); //获取父组件的name
           console.log( this.$parent.$parent.name); //获取父组件的父组件的name
           console.log( this.$root.name); //获取根组件的name(这个直接取最上级组件的值)
        }
    }
}
</script>
相关推荐
Asthenia04129 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
绵羊202313 分钟前
R语言绘制热图
开发语言·r语言
csj5014 分钟前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中18 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
小冯记录编程31 分钟前
深入解析C++ for循环原理
开发语言·c++·算法
为java加瓦34 分钟前
Lombok @Data 注解在 Spring Boot 项目中的深度应用与实践指南
java·开发语言·数据库
文韬_武略36 分钟前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌4137 分钟前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
CodeCraft Studio39 分钟前
国产化Excel开发组件Spire.XLS教程:将Python列表转换为Excel表格(3种实用场景)
开发语言·python·excel·spire.xls·python列表转excel·国产化文档开发
我要学脑机39 分钟前
C语言面试题问题+答案(claude生成)
c语言·开发语言