vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值

父组件主动获取子组件的值

1.

在调用子组件的时候定义一个ref-> ref="header"

2.

在父组件中通过this.$refs.header.属性，调用子组件的属性，例如this.$refs.header.name

在父组件中通过this.$refs.header.方法，调用子组件的方法，例如this.$refs.header.test()

子组件主动获取父组件的值

1.

在子组件中通过this.$parent.属性，调用父组件的属性，例如this.$parent.name

在子组件中通过this.$parent.方法，调用父组件的方法，例如this.$parent.test()

示例代码

这是Home组件

通过ref调用子组件的方法

import Header from "./Header.vue";

export default {

data() {

return {

msg: "我是父组件的属性"

};

},

components: {

"v-header": Header

},

methods: {

run() {

alert('我是父组件属性与方法');

},

getChildData(){

console.log(this.$refs.header.msg);

this.$refs.header.run()

}

}

};

这是Header组件

调用父组件属性与方法

export default {

data() {

return {

msg: "我是子组件的属性"

};

},

methods: {

run() {

alert("我是子组件的方法");

},

getParentData(){

console.log(this.$parent.msg)

this.$parent.run();

}

}

};

关于Vue父组件把异步获取的数据传给子组件的问题

由于父组件中的数据是异步获取的,而子组件在一开始便会渲染,所以会造成子组件渲染完成后,数据还未获取到的情况 这里有一个简单的解决方案:在子组件渲染前,判断父组件数据是否获取完成,数据获取完成后再渲染子 ...

vue.js组件之j间的通讯一 子组件接受父祖件数据

Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...

vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

父组件中vuex方法更新state，子组件不能及时更新并渲染的解决方法

场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel

示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext. ...

vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案

最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

easyui tree扩展tree方法获取目标节点的一级子节点

Easyui tree扩展tree方法获取目标节点的一级子节点 /* 只返回目标节点的第一级子节点,具体的用法和getChildren方法是一样的 */ $.extend($.fn.tree.meth ...

Dynamics 365 We API ODATA语法根据父记录查询子记录，根据子记录查询父记录(附上根据团队，队列名称查成员)

微软动态CRM专家罗勇 ,回复333或者20190508可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! 先举个N:N关系的例子.这里以根据团队的名称查找其所有团队成员的 ...

ThreadLocal解析:父线程的本地变量不能传递到子线程详解

众所周知,ThreadLocal类是java提供线程本地变量的工具类.但父线程的本地变量却不能被子线程使用,代码如下: public static void main(String[] args) { ...

随机推荐

Objective-C内存管理之-引用计数

本文会继续深入学习OC内存管理,内容主要参考iOS高级编程,Objective-C基础教程,疯狂iOS讲义,是我学习内存管理的笔记 内存管理 1 内存管理的基本概念 1.1 Objective-C中的 ...

webapp尺寸

一.viewport宽度 起源:PC端的网站要显示在移动端有什么问题? 如果把移动端的可是区域设置到(320-768)的话,大部分网站都会因为太窄而显示错乱 所以浏览器默认把viewport[这个vi ...

JAVA通过C3P0连接数据库

配置文件: <?xml version="1.0" encoding="UTF-8"?>    

AngularJs学习笔记--html compiler

原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

java实现简单web服务器&lpar;分析&plus;源代码&rpar;

在日常的开发中,我们用过很多开源的web服务器,例如tomcat.apache等等.现在我们自己实现一个简单的web服务器,基本的功能就是用户点击要访问的资源,服务器将资源发送到客户端的浏览器.为了简 ...

CentOS 修改Mysql的root密码

1.知道密码 第一次登陆(无密码) mysqladmin -u root password NEWPASSWORD 修改过密码 mysqladmin -u root -p 'oldpassword' ...

DjangoRestFramework 学习之restful规范 APIview 解析器组件 Postman等

DjangoRestFramework学习一之restful规范.APIview.解析器组件.Postman等 本节目录 一 预备知识 二 restful规范 三 DRF的APIView和解析器组件 ...

windows 上用 docker 部署aspnetcore 2&period;0

首先下载docker for windows 并且 安装. 这其中需要显卡支持虚拟化  windows系统升级到专业版  bois 启用虚拟   通过vs2017 创建一个net core ap ...

BootCamp 在MacBook 上安装Win10

首先到网上下载win10的ISO光盘, 制作win10安装盘时,一直停在copy文件.最后文件还是没有copy完整. 需要手工把iso里的文件拷贝到U盘里. 否则提示source\install.wi ...

Transfrom笔记

1.在不是以左上角为缩放点进行缩放时,其实比例不能为0,因为0将导致缩放可能出现动画效果不可控,务必选取0.1等较小值来变化