vue获取子组件元素

一，vue的this.children和this.children和this.children和this.parent

this.$children中存放的是当前vue页面的所有子组件的数组集合。
每一个子组件中的数据和函数都可以被访问到。
例如：
子组件：

<template><div><h3>这是子组件的内容</h3><button @click="change">按钮触发事件</button><button @click="test">子组件直接触发父组件的事件</button></div>
</template><script>
export default {methods:{change(){this.$emit("change")},test(){this.$parent.dosomething()}}
}
</script><style lang="less" scoped></style>

父组件：

<template><div><h1>父组件</h1><h1>底下是子组件</h1><div>{{msg}}</div><child @change="change"></child></div>
</template><script>
import child from "../views/Child"export default {data(){return{msg:"刚开始父组件中的数据"}},components:{child},methods:{change(){this.msg="修改之后父组件的数据"},dosomething(){console.log("在这里做一些事情，它是父组件中的事情")}},mounted(){this.$children[0].change()}}
</script><style lang="lsee" scoped></style>

就可以在父组件中直接调用执行子组件中的change函数。
而每个组件只有一个父组件，故而this.$parent就是父组件对象。同样的，可以在子组件中直接通过它来访问父组件中的数据，调用父组件中的函数。

二，直接使用this.$ref来定位

<child @change="change" ref="myChild"></child>
然后定位使用时，this.$refs.myChild就可以定位到这个子组件。从而进一步获取子组件的元素、数据、方法等

vue获取子组件元素相关推荐

vue --- 获取子组件数据的一个应急方案$refs
使用$refs需要注意以下2点: 1.html方法使用子组件时,需使用ref = "xxx" 声明. 2.在父组件中使用,this.refs.xxx.msg 获取数据 <!D ...
Vue进阶（幺贰零）：父组件获取子组件验证结果
文章目录一.前言二.代码实现三.拓展阅读一.前言在开发Vue项目过程中,代码复用之自定义组件是常做事情.当子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果. 尽管有 pro ...
vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
vue/uniapp父组件获取子组件内的数据或方法
1.父组件主动获取子组件中的数据和方法在父组件里面通过: ``` this.$refs.childMethod.属性 this.$refs.childMethod.方法 ``` 在父组件中:(调用子 ...
Vue.js子组件向父组件通信
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的 ...
jquery查找父窗体id_Vue父组件获取子组件中的变量
全世界只有不到3 % 的人关注了我你真是个特别的人在vue项目日常开发中,难免要把功能性组件抽离出来,这样结构就会出现父子组件,兄弟组件等,但是这样就会涉及到不同组件需要互相使用其中的某个值的问题 ...
vue3没了$children，如何获取子组件？？？
vue3没了$children,如何获取子组件??? $children 移除概览 $children 实例 property 已从 Vue 3.0 中移除,不再支持. 2.x 语法在 2.x 中 ...
【微信小程序】组件间通信与事件-获取子组件的实例对象
1.0 前言 1.1 为何写这篇笔记小程序官方文档只粗略给了一段代码,让笔者找不到北,故记录下易于理解的过程,以便新手了解和使用 1.2 获取子组件实例对象的作用当引用了组件,且父组件使用了监听函 ...

vue获取子组件元素

一，vue的this.children和this.children和this.children和this.parent

二，直接使用this.$ref来定位

vue获取子组件元素相关推荐

最新文章

热门文章