props/emit
props
- 作用:父组件通过 props 向子组件传递数据
- parent.vue
<template> <div> <Son :msg="msg" :pfn="pFn"></Son> </div> </template> <script> import Son from './son' export default { name: 'Parent', data() { return { msg:'a message' } }, methods: { pFn(){ console.log("这是pFn"); } }, components:{ Son } } </script> <style></style>
- son.vue
<template> <div> <h3>p的msg:{{ msg }}</h3> <el-button type="primary" size="default" @click="pfn">点击使用p的方法</el-button> </div> </template> <script> export default { name: 'Son', props:['pfn','msg'] } </script> <style></style>
- 效果
emit
- 作用:子组件通过 $emit 和父组件通信
- parent.vue
<template> <div> <Son :msg="msg" @onSendData="onSendData"></Son> </div> </template> <script> import Son from './son' export default { name: 'Parent', data() { return { msg:'a message' } }, methods: { }, components:{ Son }, methods: { onSendData(val){ console.log(val); } }, } </script> <style></style>
- son.vue
<template> <div> <h3>p的msg:{{ msg }}</h3> <el-button type="primary" size="default" @click="sendData">点击向p发送数据</el-button> </div> </template> <script> export default { name: 'Son', props:['msg'], created() { console.log(this); }, methods: { sendData(){ this.$emit("onSendData",'data from son') } }, } </script> <style></style>
- 效果
ref / $refs
- 作用:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法
- parent.vue
<template> <div> <Son ref="Son"></Son> </div> </template> <script> import Son from './son.vue'; export default { name: 'Parent', components:{ Son, }, mounted() { console.log("this.$refs.Son",this.$refs.Son.msg); this.$refs.Son.sayHi(); }, } </script> <style></style>
- son.vue
<template> <div> <h3>p的msg:{{ msg }}</h3> </div> </template> <script> export default { name: 'Son', data() { return { msg:"a message from son" } }, methods: { sayHi(){ console.log("hello"); } }, } </script> <style></style>
- 效果
bus事件总线
- 作用:eventBus事件总线适用于父子组件、非父子组件等之间的通信,使用步骤如下:
- 父组件
<template> <div> <Son></Son> <Son1></Son1> </div> </template> <script> import Son from './son.vue'; import Son1 from './son1' export default { name: 'Parent', components:{ Son,Son1, }, mounted() { }, } </script> <style></style>
- 子组件1
<template> <div> <h3>Son</h3> <el-button type="primary" size="default" @click="emitSon1">点击向son1发送数据</el-button> </div> </template> <script> export default { name: 'Son', data() { return { num:666, } }, methods: { emitSon1(){ console.log("this.bus",this.bus) this.bus.$emit("sendDataToSon1",this.num) } }, } </script> <style></style>
- 子组件2
<template> <div></div> </template> <script> export default { name: 'Son1', data() { return { num:0 } }, mounted() { this.bus.$on("sendDataToSon1",data=>{ console.log(data); }) }, } </script> <style></style>
- 效果
依赖注入(provide / inject)
- 作用:
- provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
- provide 钩子用来发送数据或方法。
- inject钩子用来接收数据或方法
- 祖宗组件
<template> <div> <h3>Parent num {{ num }}</h3> <Son></Son> </div> </template> <script> import Son from './son.vue'; export default { name: 'Parent', components:{ Son }, data() { return { num:888 } }, provide(){ return{ num:this.num } }, mounted() { }, } </script> <style></style>
- 父组件
<template> <div> <h3>Son num {{ num }}</h3> <Son1></Son1> </div> </template> <script> import Son1 from './son1' export default { name: 'Son', components:{ Son1, }, data() { return { num:666, } }, methods: { }, } </script> <style></style>
- 子组件
<template> <div> <h3>Son1 num {{ num }}</h3> </div> </template> <script> export default { name: 'Son1', data() { return { } }, inject:['num'], mounted() { }, computed: { }, methods: { }, } </script> <style></style>
- 效果
- 作用:
$parent/$children
- 作用:
- 使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。
- 使用 $children 可以让组件访问子组件的实例,但是, $children 并不能保证顺序,并且访问的数据也不是响应式的。
- 父组件
<template> <div> <h3>Parent num {{ num }}</h3> <el-button type="primary" size="default" @click="getSonInfo">获取子组件信息</el-button> <Son></Son> </div> </template> <script> import Son from './son.vue'; export default { name: 'Parent', components:{ Son }, data() { return { num:888 } }, mounted() { }, methods: { getSonInfo(){ console.log("this.$children",this.$children[1].msg); } }, } </script> <style></style>
- 子组件
<template> <div> <h3>Son num {{ num }}</h3> <el-button type="primary" size="default" @click="add">+</el-button> </div> </template> <script> // import Son1 from './son1' export default { name: 'Son', components: { // Son1, }, data() { return { num: this.$parent.num, msg:'a message from son' } }, computed: { setData() { } }, methods: { add(){ this.num++ }, }, mounted() { }, } </script> <style></style>
- 效果
- 作用:
$attrs/$listeners的用法
- 作用:
- vue引入了 $attrs / $listeners,实组件之间的跨代通信。
- $attrs:继承所有的父组件属性(除了props传递的属性、class 和 style),一般用在子组件的子元素上
- $listeners:该属性是一个对象,里面包含了作用在这个组件上的所有监听器,可以配合 v-on=" $listeners " 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)
- inheritAttrs:默认值为true,继承所有的父组件属性除props之外的所有属性。
只继承class属性。
- 祖先组件
<template> <div> <h3>Parent num {{ num }}</h3> <Son :sondata="num1" :son1data="num2" @onSon="onSon" @onSon1="onSon1"></Son> </div> </template> <script> import Son from './son.vue'; export default { name: 'Parent', components:{ Son }, data() { return { num:1, num1:666, num2:888, } }, mounted() { }, methods: { onSon(){ console.log("son的回调") }, onSon1(){ console.log("son1的回调"); } }, } </script> <style></style>
- 父组件
<template> <div> <h3>Son num {{ sondata }}</h3> <Son1 v-bind="$attrs" v-on="$listeners"></Son1> </div> </template> <script> import Son1 from './son1' export default { name: 'Son', components: { Son1, }, props:["sondata"], data() { return { } }, inheritAttrs:false, computed: { }, methods: { }, mounted() { this.$emit("onSon","i am son") }, } </script> <style></style>
- 子组件
<template> <div> <h3>Son1 num {{ son1data }}</h3> </div> </template> <script> export default { name: 'Son1', data() { return { } }, props: ["son1data"], inheritAttrs:false, mounted() { this.$emit("onSon1","a message from son1") }, computed: { }, methods: { }, } </script> <style></style>
- 效果
- 作用:
Vue2 组件通信方式
2024-05-11 18:54:12 28 阅读