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

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

子组件获取父组件的值和方法

在components创建一个poster组件

<template>
  <div></div>
</template>

<script>
export default {
  name: "poster",
  data() {
    return {};
  },
  props: ["title", "getrun"], //title用来接收值,getrun接收方法
  mounted() {
    this.getrun();
    console.log(this.title);
  },
  methods: {}
};
</script>

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

<template>
  <div class="home">
    <poster :title="title" :getrun="getFa" />
  </div>
</template>

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

export default {
  name: "home",
  components: {
    poster
  },
  data() {
    return {
      title: "父组件传给子组件的值"
    };
  },
  methods: {
    getFa() {
      console.log("父组件传给子组件的方法");
    }
  }
};
</script>

父组件获取子组件的值和方法

子组件

<template>
  <div>
    <button @click="getSon()">子组件向父组件通信</button>
  </div>
</template>

<script>
export default {
  name: "poster",
  data() {
    return {
      sonMsg: "这是子组件的值"
    };
  },
  mounted() {},
  methods: {
    getSon() {
      this.$emit("son", [this.sonMsg, "传递多个值"]);
    }
  }
};
</script>

父组件

<template>
  <div class="home">
    <poster @son="getSon" />
  </div>
</template>

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

export default {
  name: "home",
  components: {
    poster
  },
  data() {
    return {};
  },
  methods: {
    getSon(e) {
      console.log(e);
    }
  }
};
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue使用ref父子组件通信

    wePanda
  • swiper.animate实现轮播展示动画效果

    wePanda
  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    wePanda
  • Vue.js组件

    组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一:...

    河湾欢儿
  • Vue学习笔记之vue-cli脚手架项目中组件的使用

    在webpack-simple模板中,包括webpck模板。一个.vue文件就是一个组件。

    Jetpropelledsnake21
  • Vue一个案例引发的「编程式」创建组件

    版权声明:本文为原创文章首发于公众号:六小登登 , 你可以随意转载但请务必注明出处!!https://blog.csdn.net/qq_32135281/art...

    六小登登
  • 理解Unity3D中的四种坐标体系

    2017-07-31 by Liuqingwen | Tags: Unity3D | Hits

    IT自学不成才
  • 前端基础-Vue.js组件

    https://cn.vuejs.org/v2/guide/components.html

    cwl_java
  • 图解AngularJS Wijmo5和LightSwitch

    Visual Studio 2013 中的 LightSwitch 有新增功能,包括更好的团队开发支持以及在构建 HTML 客户端桌面和 Office 365 ...

    葡萄城控件
  • 扩展 Vue 组件

    你是否在开发基于 Vue 的 app 时使用过具有相同属性甚至具有相同的 template 结构的组件?

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券