当前位置:首页 > vue技术文章 > Vue子组件向父组件通信与父组件调用子组件中的方法

关于Vue子组件向父组件通信与父组件调用子组件中的方法步骤

  • 发布时间:
  • 作者:码农之家原创
  • 点击:158

这篇文章主要知识点是关于vue、父组件调用子组件、子组件向父组件通信、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

前端工程师必备技能:Vue移动开发实战技巧
  • 类型:Vue实战大小:122 MB格式:PDF作者:李利德
立即下载

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子组件向父组件通信与父组件调用子组件中的方法

总结

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

使用vueScroll实现移动端下拉刷新、上拉加载示例代码

Laravel5.5中的包自动发现Package Auto Discovery实例详解

详解async/await与promise(nodejs中的异步操作问题)

解压缩利器 7-Zip v20.00 Alpha

腾讯视频PC客户端v10.28.5454(去广告绿色版)

展开 +

收起 -

Vue 相关电子书
学习笔记
网友NO.583250

vue中子组件向父组件传递数据的实例代码(实现加减功能)

这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下,这个的原理。 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码。 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title子组件将数据传递给父组件/title script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"/script/headscript//定义一个组件Vue.component('counter', { template: '\ div \ div这里是子组件里面的内容!/div\ div /div\ div\ span 加法运算/spanbutton @click="incrementCounter"+/button\ /div\ div\ span 减法运算/spanbutton @click="deleteCounter"-/button\ /div\ /div\ ', data: function () { return { counter: 0 } }, methods: {……

网友NO.293880

vue中如何让子组件修改父组件数据

一、关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 •1、常见的使用场景 ...watch:{ value(val) { console.log(val); this.visible = val; }}... •2、如果要一开始就执行 ...watch: { firstName: { handler(newName, oldName) { this.fullName = newName + '-' + this.lastName; }, immediate: true, }}... •3、深度监听(数组、对象) ...watch: { obj: { handler(newName, oldName) { console.log('///') }, immediate: true, deep: true,}... 二、关于子组件修改父组件属性认识 在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "你修改的属性名" •1、通过事件发送给父组件来修改 **在子组件test1中**input type="text" v-model="book"/……

网友NO.469893

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

Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { console.log('调用成功') } }} 父组件: child ref="child" @click="click"/childexport default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child }} 以上这篇Vue父组件调用子组件事件方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.971890

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

在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: uploadImg :width="200" :height="200" name="productImage" size="750px*750px" ref="productImage" :src-list="this.productImage"/uploadImg this.productImage=res.data.cover; 这里把通过后台返回的数组赋值给 this.productImage ,然后把该数组传给子组件定义的props属性src-list 子组件: watch:{ srcList(curVal,oldVal){ if(curVal){ ; this.uploadImg=curVal; } },} 然后子组件成功获取到该数组 方法二: 通过ref属性,父组件调用子组件的方法,把要传的数组作为参数传给子组件,子组件获取该参数,并使用 父组件……

网友NO.857525

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

前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意。 例如: 注意: 不应该对 data 属性使用箭头函数 (例如 data: () = { return { a: this.myProp }} ) 。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例, this.myProp 将是 undefined https://cn.vuejs.org/v2/api/#methods 父组件通过props向子组件传递方法 父组件调用子组件,通过绑定callback属性,将方法传给子组件: App.vue search-bar class="f-fr" placeholder="请输入名字" mutationName='resetListData' :callback="callback"/ 子组件通过props获取父组件传过来的callback方法: SearchBar.vueexport default { name: 'SearchBar', data() { return { input: '' } }, methods: { setName: function (……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757