时间:2022-04-11 10:46:01 | 栏目:vue | 点击:次
// 父组件中 <template> <div> <Child ref="child" :title="value"/> </div> </template> <script> export default { data() { return { value: 'hello world!' } } } </script>
// 父组件中 <template> <div> <span>{{title}}</span> </div> </template> <script> export default { props: { title: { type: String, default: '' } } } </script>
//title值为'hello world!
$emit
传值
$on
接收
$off
删除传输事件
this.$bus.$emit("flag",true)
mounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
<template> <div> <Child ref="child" @getTitle="getTitle"/> </div> </template> <script> import Child from './components/Child' export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.log(data) } } } </script>
打印结果为 hello xuliting
<template> <div> <span>{{title}}</span> </div> </template> <script> export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } } } </script>
组件间也可以通过传递方法从而解决。例如父组件为A,子组件有B和C。
父组件A调用子组件B的方法定义为aFun,把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递
<C :a-fun="aFun" />
引用的则是在组件C,通过props
props: { aFun: { type: Function, default: () => function() {} } }