Vue子组件向父组件通信与父组件调用子组件中的方法

子组件向父组件通信

子组件的button按钮绑定点击事件,事件方法名为sendToParent(),

该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);

在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),

而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

父组件调用子组件中的方法

点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],

useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);

而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,

所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

代码示例（结合上面的分析理解代码）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子向父通信</title>
  <style>
    #app {
      border: 1px solid blue;
      width: 500px;
      padding: 20px;
      margin: auto;
      border-radius: 8px;
      background: fuchsia;
    }
    #wrapper {
      border: 1px solid red;
      width: 400px;
      padding: 20px;
      border-radius: 8px;
      background: yellowgreen;
      margin-top: 20px;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <!-- 父组件 -->
    <h1>这是父组件</h1>
    <p>展示父级接收到的消息:{{msg}}</p>
    <button @click="useChild(szStr)">调用子组件的方法</button>
     <!-- cus-event为子组件自定义的事件名； doAction($event)为父组件的事件，参数$event不可少也不可写成其他-->
    <!-- ref表示组件的别名 -->
    <child @cus-event="doAction($event)" ref="child1"></child>
  </div>
</body>
</html>
<template id="child">
  <div id="wrapper">
    <!-- 子组件 -->
    <h2>这是子组件</h2>
    <button @click="sendToParent">向父组件发消息</button>
  </div>
</template>
<script>
  let child = {
    template: '#child',
    data() {
      return {
        msg: '子级消息'
      };
    },
    methods: {
      sendToParent() {
        // 子组件只管发送消息，其中cus-event为自定义事件名（事件名不能写成驼峰法,多个单词用-连接），this.msg为要传递的参数。
        this.$emit('cus-event', this.msg);
      },
      getMsg(str) {
        console.log('子级组件收到父级的内容', str);
      }
    }
  };
  // 注意: .$mount('#app')跟实例内部el: '#app'是等价的
  new Vue({
    data: {
      msg: '',
      szStr:'父级消息'
    },
    components: {
      child
    },
    methods: {
      doAction(e) {
        console.log(this);
        console.log(e);
        this.msg = e;
      },
      useChild(str) {
        // 调用子组件的方法
        // console.log(this);
        // console.log(this.$refs);
        // this.$refs.child1得到的子组件实例
        this.$refs.child1.getMsg(str);
      }
    }
  }).$mount('#app');
</script>

效果图

总结

以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue2.x中的父组件传递数据至子组件的方法

    Vue2.x中的父组件传递数据至子组件的方法

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • Vue中父组件向子组件通信的方法

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s

  • 详解vue2父组件传递props异步数据到子组件的问题

    测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

  • vue.js中父组件调用子组件的内部方法示例

    前言 今天同事问了一个问题,他在用iview开发时,需要用到iview一个组件的内部方法,而这个内部方法并没有暴露出来,这种情况下如何调用组件内部方法呢,其实很简单,举个栗子

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

  • vue的props实现子组件随父组件一起变化

    本文实例为大家分享了vue的props实现父组件变化子组件一起变化,供大家参考,具体内容如下 类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 绑定动态 Props 到父组件的数据.每当父组件的数据变化时,也会传导给子组件: <div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></c

  • vue2中组件互相调用实例methods中的方法实现详解

    vue2中组件互相调用实例methods中的方法实现详解

    目录 前言: 开始前: 使用 第一步.定义全局mixin 第二步添加代码提示d.ts声明文件 在项目下新建jsconfig.json 添加shims-vue.d.ts声明文件 添加event-keys.d.ts声明文件 第三步编写webpack插件 新建global-dispatch.js 自动生成event-keys.d.ts 添加vue-path-loader.js webpack loader文件 配置vue.config.js 后记 仓库地址 总结 前言: 大家都知道在vue2中相互调用

  • vue 使用ref 让父组件调用子组件的方法

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • React父组件调用子组件中的方法实例详解

    目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件  Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • Vue组件通信方式(父传子、子传父、兄弟通信)

    目录 父组件传到子组件 子组件向父组件传值 非父子传参 (事件总线) vue 跨页面双向通信 同源通信 非同源通讯 父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 (子组件中修改props数据,是无效的,会有一个红色警告) 1. 父组件parent.vue代码如下:  <template>    <div class="parent">      <h2>{{ msg }}</h2>      

  • vue 子组件向父组件传值方法

    子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

随机推荐