vue组件通信之父组件主动获取子组件数据和方法

ref 可以用来获取到dom节点，如果在组件中应用，也可以用来获取子组件的数据和方法。

比如，我定义了一个home组件，一个head组件，home组件中引用head组件。

此时，home组件是head组件的父级，我想在home（父组件）组件中，获取head（子组件）组件中定义的数据和方法

<v-head ref="header"></v-head>   // v-head 为 head 组件在 home 组件中注册的标签名，ref='header' 相当于获取到当前组件

<button @click='getHeadData()'>父组件主动获取子组件定义的数据和方法</button>

getHeaderData() {                  // home 组件 methods 下定义的方法this.$refs.header.on_alert();   // on_alert() 是 head 组件中定义的一个方法
}

这样，就可以在父组件中，主动获取到子组件中的数据和方法。

当然，子组件也可以主动获取父组件的数据和方法。

this.$parent.run()  // run 为 home 组件中定义的方法，在 head 组件中可以直接调用

转载于:https://www.cnblogs.com/Sky-Ice/p/9289123.html

vue组件通信之父组件主动获取子组件数据和方法相关推荐

vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
angular使用@viewChild父组件获取子组件的数据和方法
一. 父组件通过局部变量获取子组件的引用 ,主动获取子组件的数据和方法 1. 使用#给子组件命名为#footer <app-footer #footer></app-footer ...
vue/uniapp父组件获取子组件内的数据或方法
1.父组件主动获取子组件中的数据和方法在父组件里面通过: ``` this.$refs.childMethod.属性 this.$refs.childMethod.方法 ``` 在父组件中:(调用子 ...
vue组件通信：父与子、子与父
父与子.子与父通信 1. 组件通信 1.1 组件嵌套 1.2 组件嵌套步骤 1.3 父与子.子与父通信 1.4 实现案例图示 2. 父组件与子组件通信 2.1 父与子通信 2.2代码实现父与子及详细说 ...
四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收子传父:在父组件中监听一个事件,在子组件中 ...
Vue组件通信：父传子、子传父、跨组件通信
方法一:组件通信_父传子_props(属性绑定) 在进行组件通信之前,我们首先要明确父和子是谁,父传子=>在父中引入子(被引入的是子) 1. 父传子,要先在子组件内定义props变量,准备接收, ...

vue组件通信之父组件主动获取子组件数据和方法

vue组件通信之父组件主动获取子组件数据和方法相关推荐

最新文章

热门文章