Vue子组件向父组件通信与父组件调用子组件中的方法
更新时间：2018年06月22日 16:33:33 作者：ybs5431
这篇文章主要介绍了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框架单网页应用首屏加载慢这个问题,我们需尽量减少加载负担,故采用按需引入的方式,只引入项目中用到的组件,这篇文章主要给大家介绍了关于Vue3按需引入Element Plus以及定制主题色的相关资料,需要的朋友可以参考下2023-06-06
Vue.js实现一个自定义分页组件vue-paginaiton
这篇文章主要为大家详细介绍了Vue.js实现一个自定义分页组件vue-paginaiton的具体代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
three.js是一个用于在Web上创建三维图形的JavaScript库,它可以用于创建各种类型的三维场景,包括游戏、虚拟现实、建筑和产品可视化等,下面这篇文章主要给大家介绍了关于如何通过一文带你了解threejs在vue项目中的基本使用,需要的朋友可以参考下2023-04-04
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡2020-02-02
这篇文章主要为大家详细介绍了Vue自定义可以选择日期区间段的日历插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了关于Vue生命周期的那些事,在使用vue开发过程中经常会接触到生命周期的问题,但对于每个钩子函数都做了什么,应用场景比较模糊,希望通过这次梳理让自己清楚一些,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了vue数据双向绑定的注意点，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
Element-UI Table组件上添加列拖拽效果实现方法
这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
下面小编就为大家分享一篇解决vue+webpack打包路径的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue如何根据数值判断颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论