子组件主动获取父组件的数据和方法

简单示例:

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--子组件主动获取父组件的数据和方法的更多相关文章

  1. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  2. Vue 父组件主动获取子组件的值,子组件主动获取父组件的值

    父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...

  3. vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

    父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...

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

    ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...

  5. 子组件获取父组件数据 propsDown, 父组件获取子组件数据 eventUp

    (一) popsDowm 三种方法获取父组件数据:被动获得(1):主动获取(2). 1.被动获得: 父组件:v-bind: 绑定变量参数和方法参数:子组件:props 接收参数.可以在模板中直接使用也 ...

  6. Vue父组件主动获取子组件的数据和方法

    Vue父组件主动获取子组件的数据和方法 https://www.jianshu.com/p/bf88fc809131

  7. vue--父组件主动获取子组件的方法

    父组件主动获取子组件的方法和属性 第一步:调用自组件的时候,给自组建定义一个Header <v-header ref='headerInfo'></v-header> 第二步: ...

  8. VUE里子组件获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在 ...

  9. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. lua:值得看的博客资源 ...

    凯奥斯 :https://blog.csdn.net/ecidevilin/article/category/6454847 https://blog.csdn.net/qinyuanpei/arti ...

  2. MVC使用 Elmah 日志记录组件

    在后台管理中,有一些操作是需要增加操作日志的,尤其是对一些比较敏感的金额类的操作,比如商城类的修改商品金额.删除商品.赠送金额等人工的操作.日志中记录着相关操作人的操作信息,这样,出了问题也容易排查. ...

  3. 代码记录——phase16,block36(修正后)

    加入边缘判定,<2则加2. if (x_upleft<2) x_upleft=x_upleft+2; if (y_upleft<2) y_upleft=y_upleft+2; HRE ...

  4. [Arch] 02. Design principle and Software Pattern

    Ref: 软件设计的七大原则 有时间的话,还需进一步深入理解. Figure, 重要的前五个原则 单一职责原则 (Simple responsibility pinciple SRP) 类的设计趋向于 ...

  5. OpenVPN多处理之-多队列TUN多实例

    两年前我以前提到了多个OpenVPN共享一个tun虚拟网卡,旨在降低管理开销和切换开销,由于我讨厌在外面对一大堆网卡做Bridge或者Bonding,除了初衷不同,其实的关于TUN的进展一直没有偏离我 ...

  6. struts开发&lt;struts中的參数传递.三&gt;

    不说废话,直接上干货 1.通过set和get传递參数 添加username 和password两个属性并添加set和get方法 package fzl.user.struts.demo; import ...

  7. C#------如何处理缺少对公共可见类型或成员的xml注释的警告

    出现警告的原因: 使用Swagger框架时 如图,只要加上注释就可以了 使用前: 使用后:

  8. PMP模拟考试-1

    1. A manufacturing project has a schedule performance index (SPI) of 0.89 and a cost performance ind ...

  9. Incorrect column count: expected 1, actual 5,JdbcTemplate queryForList 出错

    spring JdbcTemplate  queryForList 出错 Incorrect column count: expected 1, actual 5 >>>>&g ...

  10. 【GIS】Cesium GLTF

    cd D:\GISSoft\3DsMax2017\COLLADA2GLTF-v2.1.4-windows-Release-x64 COLLADA2GLTF-bin.exe -f tree05.DAE ...