专栏首页前端开发随笔Vue使用ref父子组件通信

Vue使用ref父子组件通信

创建一个子组件

<template>
  <div>
    <button @click="getParent()">获取父组件信息</button>
  </div>
</template>
<script>
export default {
  name: "poster",
  data() {
    return {
      sonMsg: "这是子组件的值"
    };
  },
  mounted() {},
  methods: {
    getSon() {
      console.log("这是子组件的方法");
    },
    getParent() {
      //子组件通过$parent获取父组件的方法和值
      this.$parent.getFa();
      console.log(this.$parent.faMsg);
    }
  }
};
</script>

创建一个父组件,把子组件引入到父组件中去

<template>
  <div class="home">
    <poster ref="poster" />
  </div>
</template>

<script>
import poster from "@/components/poster.vue";

export default {
  name: "home",
  components: {
    poster
  },
  data() {
    return {
      faMsg: "这是父组件的值"
    };
  },
  mounted() {
    // 获取到子组件的值和方法
    this.$refs.poster.getSon();
    console.log(this.$refs.poster.sonMsg);
  },
  methods: {
    getFa() {
      console.log("这是父组件的方法");
    }
  }
};
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue使用props和emit父子组件通信

    wePanda
  • jquery.countup实现数字滚动

    wePanda
  • 微信小程序锚点选择导航栏

    wePanda
  • ZooTeam 拍了拍你,来看看如何设计动态化表单

    对于 ToB 业务而言,随着业务的不断壮大,接入的客户逐渐增加,相同页面的差异化的需求越来越多,尤其是在表单层面,小到多一个字段少一个字段这种简单的需求,大到整...

    政采云前端团队
  • Vue-cli父子组件之间传参

    小小咸鱼YwY
  • Python使用matplotlib绘制正多边形逼近圆周

    运行结果:用鼠标单击或拖动Slider组件并修改其值,单击按钮组件可以恢复Slider组件的默认值6。

    Python小屋屋主
  • 小程序的autocomplete

    1、别做单个组件的autocomplete了,很坑,牵扯的坑太多,最后碰到原生组件canvas会让人欲哭无泪

    windseek
  • 从工程化角度讨论如何快速构建可靠React组件

    前言 React 的开发也已经有2年时间了,先从QQ的家校群,转成做互动直播,主要是花样直播这一块。切换过来的时候,业务非常繁忙,接手过来的业务比较凌乱,也没有...

    李成熙heyli
  • 如何使用基于组件的设计方法

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 基于组件的设计方法通常在大型复杂的设计项目中才会谈论到...

    奔跑的小鹿
  • 厌倦了写活动页?快来撸一个页面生成器吧!

    如果你经常接触一些公司的活动页,可能会经常头疼以下问题:这些项目周期短,需求频繁,迭代快,技术要求不高,成长空间也小。但是我们还是马不停蹄的赶着产品提来的一个个...

    coder_koala

扫码关注云+社区

领取腾讯云代金券