对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结
父组件---属性的方式传值给子组件
子组件---props方式接收数据
<Son :datas="fData"></Son> <script> import Son from '@/components/son' export default{ name:'Father', components:{Son}, data(){ return{ fData:'我是父组件向子组件传递的值-props方式' } } } </script>
子组件props接受的参数名称,要与父组件传递时定义的属性名一致
<template> <div>我是父组件的数据:{{fData}}</div> <div @click=changeData>我是父组件传递修改后的数据:{{mydata}}</div> </template> <script> export default{ name:'Son', props:{ fData:{ type:String, default:'' } } data(){ mydata:this.fatherData }, methods:{ changeData(){ this.mydata += '改变数据' } }, } </script>
注意:
props:{ fData:{ type:[String,Number], default:'' } }
子组件
<el-button @click="handleEmit">改变父组件</el-button> <script> export default{ name:'Son', methods:{ handleEmit(){ this.$emit('triggerEmit','子组件的数据') } } } </script>
父组件(子组件发送的事件名称,要和父组件接受的事件名称一致)
<Son @triggerEmit="changeData"></Son> <script> import Son from '@/components/son' export default{ name:'Father', components:{Son}, methods:{ changeData(name){ console.log(name) // => 我是来自子组件的数据 } } } </script>
$emit与props结合 兄弟组件传值
父组件
<childA :myName="name"></ChildA> <ChildB :myName="name" @changeName="editName"></ChildB> export default{ data() { return { name: '数据你好' } }, methods: { editName(name){ this.name = name } } }
子组件B改变,接收数据
<p>姓名:{{ myName }}</p>
<button @click="changeName">修改姓名</button> <script> export default{ props: { myName:String }, methods: { changeName() { this.$emit('changeName', '新数据名称') } } } </script>
子组件A接收数据
<p>姓名:{{ newName }}</p> <script> export default{ props: { myName:String } } </script>
非父子组件或更多层级间组件间传值,在Vue中通过单独的事件中心来管理组件间的传值
import Vue from "vue" const bus=new Vue() export default bus
需要改变数据的组件中定义调用
<template> <div> <div>我是通信组件A</div> <button @click="changeName">修改姓名</button> </div> </template> <script> import bus from "@/utils/Bus.js"; export default { components: {}, data() { return {}; }, mounted() { console.log(bus); }, methods: { changeName() { bus.$emit("editName", "数据集!"); }, }, }; </script> <style lang='scss' scoped> </style>
另外一个组件中同样引入bus.js文件,通过$on监听事件回调
<template> <div> <span>名称:{{name}}</span> <div>我是通信组件B</div> </div> </template> <script> import bus from "@/utils/Bus.js"; export default { components: {}, data() { return {name}; }, mounted() { bus.$on("editName", (name) => { this.name=name console.log(name); // }); }, methods: {}, }; </script> <style lang='scss' scoped> </style>
子组件---this.$parent可以获取到父组件的方法、data的数据等,并可以直接使用和执行
<template> <div>我是子组件</div> </template> <script> export default{ name:"Son", data(){ return{ sonTitle: '我是子组件的数据' } }, methods:{ sonHandle(){ console.log('我是子组件的方法') } }, created(){ console.log(this.$parent) console.log(this.$parent.fatherTitle) // => 我是父组件的数据 this.$parent.fantherHandle() // => 我是父组件的方法 } } </script>
父组件 --- 获取子组件实例的,并且获取的实例是一个数组形式,this.$children[0]才可以获取某个组件实例,并调用组件方法和数据
<template> <div> <Son>我是父组件</Son> </div> </template> <script> import Son from './son.vue' export default{ name: 'father', components:{ Son }, data(){ return{ fatherTitle: '我是父组件的数据' } }, methods:{ fantherHandle(){ console.log('我是父组件的方法') } }, mounted(){ console.log(this.$children) console.log(this.$children[0].sonTitle) // => 我是子组件的数据 this.$children[0].sonHandle() // => 我是子组件的方法 } } </script>
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
父组件使用 $refs 获得组件实例
<template> <div> <Son ref="son"></Son> </div> </template> <script> import Son from './son.vue' export default{ name: 'father', components:{ Son }, mounted(){ console.log(this.$refs.son) /*组件实例*/ } } </script>
/*父组件*/ export default{ provide: { return{ provideName: '贩卖前端仔' } } }
至此provideName这个变量可以提供给它其下的所有子组件,包括曾孙、孙子组件等,只需要使用 inject 就能获取数据
/*子组件*/ export default{ inject: ['provideName'], created () { console.log(this.provideName) // => "贩卖前端仔" } }
子元素
<template> <div> <div class="isSon"> <slot :info='arrList'></slot> </div> </div> </template> <script> export default { components: {}, data() { return {arrList:[1,'aa','张三']}; }, mounted() { }, methods: { }, }; </script>
父元素
<template> <div> <SonG> <span slot-scope="props"> <ul> aa <li v-for="item in props.info" :key="item"> {{item}} </li> </ul> </span> </SonG> </div> </template> <script> import SonG from '../components/SonG.vue' export default { components:{ SonG }, data () { return { } } } </script>
相当于一个公共数据的仓库
提供一些方法管理仓库数据
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { } })