$listeners: https://vuejs.bootcss.com/api/#vm-listeners
也可用于父子组件传值。
一. 传值方法
- 祖级组件
通过
v-bing
方式传递参数,v-on
方式传递方法。<parent :sendText="sendText" @handleChange="changeMsg"></parent>
- 父级组件
中间组件
v-bind="$attrs"
v-on="$listeners"
<son v-bind="$attrs" v-on="$listeners"></son>
- 孙级组件
通过
created
生命周期钩子获取传递的数据。created() { console.log("son", this.$attrs, this.$listeners); },
通过
$emit
向祖级组件调用方法,并传值。methods: { clickBtn() { this.$emit("handleChange", "收到!"); } }
二. 传值实例
- 祖级组件
<template> <div> <h3>祖级组件</h3> <p>接收信息:{{ msg }}</p> <hr /> <parent :sendText="sendText" @handleChange="changeMsg"></parent> </div> </template> <script> import Parent from "./Parent.vue"; export default { components: { Parent }, data() { return { sendText: "收到请回答", msg: "" }; }, methods: { changeMsg(evt) { console.log("后代组件传回来的值", evt); this.msg = evt; } } }; </script> <style scoped> </style>
- 父级组件
<template> <div> <h3>父级组件</h3> <hr /> <son v-bind="$attrs" v-on="$listeners"></son> </div> </template> <script> import Son from "./Son.vue"; export default { components: { Son }, data() { return {}; }, created() { console.log("parent", this.$attrs, this.$listeners); } }; </script> <style scoped> </style>
- 孙级组件
<template> <div> <h3>孙级组件</h3> <p>接收信息:{{ text }}</p> <button @click="clickBtn">传值给祖级组件</button> </div> </template> <script> export default { data() { return { text: "" }; }, created() { console.log("son", this.$attrs, this.$listeners); this.text = this.$attrs.sendText; }, methods: { clickBtn() { this.$emit("handleChange", "收到!"); } } }; </script> <style scoped> </style>