vue 父子组件通信
Posted zjx304
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 父子组件通信相关的知识,希望对你有一定的参考价值。
vue提倡单项数据流,因此在通常情况下都是父组件传递数据给子组件使用,子组件触发父组件的事件,并传递给父组件所需要的参数。
props
上篇文章已经叙述过
$emit和$on
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;
//父组件 <template> <div id="app"> <v-child @pastInfo="sendMsg"></v-child> </div> </template> <script> import Child from ‘./components/Child‘ export default { components:{ ‘v-child‘:Child }, data(){ return{ parentMessage:‘来自父组件的信息‘ } }, methods:{ sendMsg(name,age){ console.log(this.parentMessage,name,age); } } } </script>
<template> <div> <div>子组件</div> </div> </template> <script> export default { mounted(){ this.$emit(‘pastInfo‘,{name:‘zhangsan‘,age:‘10‘}) } } </script>
以上是关于vue 父子组件通信的主要内容,如果未能解决你的问题,请参考以下文章