专栏首页授客的专栏Vue 在父(子)组件引用其子(父)组件方法和属性

Vue 在父(子)组件引用其子(父)组件方法和属性

Vue 在父(子)组件引用其子(父)组件方法和属性

by:授客 QQ:1033553122

开发环境

Win 10

element-ui "2.8.2"

Vue 2.9.6

父组件代码

<template>

<div>

<button @click="callChildMethod()">父组件调用子组件方法</button>

<button @click="getChildAttribute()">父组件获取子组件属性</button>

<header-part ref="headerChild"></header-part>

</div>

</template>

<script>

import HeaderPart from "./HeaderPart";

export default {

components: {

HeaderPart

},

data() {

return {

title: "父组件"

};

},

methods: {

callChildMethod() {

console.log("父组件中调用子组件printName方法");

this.$refs.headerChild.printName();

},

getChildAttribute() {

console.log(

"父组件获取子组件title属性值:" + this.$refs.headerChild.title

);

},

printName() {

console.log("打印父组件title属性值:" + this.title);

}

},

mounted() {

this.$customUtils.headerMenu.initMenuComponent();

}

};

</script>

子组件代码

<template>

<div>

<button @click="callFatherMethod()">子组件中调用父组件的方法</button>

<button @click="getFatherAttribute()">子组件中获取父组件的属性</button>

</div>

</template>

<script>

export default {

data() {

return {

title: "子组件"

};

},

methods: {

callFatherMethod() {

console.log("子组件中调用父组件printName方法")

this.$parent.printName();

},

getFatherAttribute(){

console.log("子组件获取父组件title属性值:" + this.$parent.title);

},

printName(){

console.log("打印子组件title属性值:" + this.title)

}

}

};

</script>

实验结果:

总结

父组件获取中引用子组件方法、属性

给子组件定义一个ref(假设名称为childRef),然后父组件中通过this.$refs.childRef获取子组件,进而引用子组件方法、属性,如下:

this.$refs.childRef.方法(参数列表)

this.$refs.childRef.属性

子组件中获取父组件的方法、属性

在子组件里面通过this.$parent获取父组件,进而引用父组件的方法和属性,如下:

this.$parent.属性

this.$parent.方法

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Elasticsearch alias别名管理小结

    "alias": "test1_index_alias"

    授客
  • Linux Linux内核参数调优

    2、尽量不要“批量”修改内核参数,笔者就曾这么干过,结果“调优”后,性能反而下降,事务出错数反而增加,所以,调优的时候可以考虑逐个参数进行调优,然后对比效果。

    授客
  • 性能测试 操作系统性能分析思路总结

    先查看系统整体负载(可通过w,uptime,top等命令查看),可以查看15分钟前,5分钟前,1分钟前到现在负载均值。

    授客
  • 微信小程序组件化编程和实践(下)

    现在我们已经可以做到了两个组件之间的数据传递,那么如何在多个组件间传递数据呢?

    疯狂的小程序
  • React数据流和组件间的通信总结

    首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

    前朝楚水
  • React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • Vue基础总结2

    提示:遇到的问题:当我们还在页面first的时候,页面second还没生成,也就是页面second中的 created中所监听的来自于first中的事件还没有被...

    用户7386338
  • Taro UI 2.0 发布:新增自定义主题功能,适配更多小程序

    转眼间,Taro UI 发布已有半年,在此期间,不断完善组件库的功能和特性,新增了许多组件和小工具,包括但不限于:

    京东技术
  • vue-cli脚手架使用

            components:{App}//注册的组件 名称来自import引入时的名字

    余生
  • 面向设计的半封装web组件开发 - 腾讯ISUX

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券