Vue组件通讯

彩色之外

已于 2023-04-12 18:20:53 修改

阅读量2.4k

点赞数 3

分类专栏： # vue2 文章标签： vue.js 前端 javascript

于 2021-12-05 12:28:17 首次发布

CSDN-@活在风浪里001

本文链接：https://blog.csdn.net/m0_57904695/article/details/121723392

版权

vue2 专栏收录该内容

19 篇文章 9 订阅

订阅专栏

父组件向子组件传值

第一种方法也是最常用方法自定义属性先看理解

第二种方法 provide

第三种方法 this.$parent

子组件向父组件传值

第一种方法也是最常用的一种方法子组件通过绑定事件触发函数

第二种方法 $children

非父子组件传值

父组件向子组件传值

所谓父组件向子组件传值的本质含义是 让子组件获取到父组件的数据
第一种方法也是最常用方法自定义属性先看理解
父组件使用自定义属性，将值传到子组件，子组件使用props接受，props存放接受父组件的值与data同级,可直接使用
props 接收数据的方法分为数组接收和对象接收
数组接收数据的方法很简单就是把自定义的属性以字符串的形式写在数组中即可
对象接收数据的写法相对复杂但是功能更齐全也更规范看详细常用的子父传值,点这里

  props: {
        attr: String, // 这是props的简写方法 只定义数据的数据类型
        title: {
            type: String,
            default: '', // 默认值 默认值只有在属性的值是undefined或者不传属性的时候才会生效 
            //required: true // 定义该属性是否必须传递
        },
        arr:{
            type: Array,
            default: () => { // 在vue2中 引用数据类型的默认值需要通过一个函数返回才能使用 否则vue的逻辑会报错
                return []
            }
        }
    }

第二种方法 provide
解释: provide ：vue官方建议使用在高阶组件中 provide对象提供的数组在它的任意后代组件中都可以使用 inject数组来接收 .高阶函数: 例如一个from里面有一个button,button要写一个图标,是不是嵌套很深, 你要form数据传给图标要一层一层的传吗?使用provide:{} inject:[] 解决. provide提供的数组在它的任意后代组件中都可以使用 inject接收 是不是对应上面加粗的"任意后代组件中"?
父组件 provide 提供的意思

//父组件 定义provide  提供的意思
//在父组件将数据定义在 provide:{}里面,与data同级,在子组件用inject:[]任意后代子组件都可以接受到
<script>

export default {
  name: 'Home',
  provide: {
    name: '张三',
    age: 16
  }
  data() {
    return {
      msg: 'hello world',
      title: undefined,
      arr: ['英雄', '云顶', '穿越', '王者']
    }
  },

  methods: {
   
    },

   
  
}
</script>

子组件 inject 增加投入的意思

//在父组件将数据定义在 provide:{}里面,与data同级,在子组件用inject:[]任意后代子组件都可以接受到
// inject:[]与data props同级
<script>
export default {
    // props: ['msg']
    props: {
        msg: String,
        title: {
            type: String,
            default: '',
            required: true
        },
        arr: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    inject: ['name', 'age', 'sex', 'tel'],
    data() {
        return {
            type:'child'
        }
    },
    created() {
        // console.log(this.name);
        // console.log(this.sex)
        // console.log(this.tel)
        console.log(this.$parent.msg)
        this.$parent.fun()
        
    },

    methods: {
        choseLi(item) {
            this.$emit('chose', item, 1, 2, 3) 
        }
    }
}
</script>

第三种方法 this.$parent
子组件中可以通过 this.$parent 找到父组件从而找到父组件中的所有的数据以及方法

这是父组件定义的数据和方法子组件中可以通过 this.$parent 找到父组件从而找到父组件中的所有的数据以及方法
父组件

子组件打印this.$parent的图片

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

子组件在钩子函数中打印父组件数据和方法

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAMC7mtLvlnKjpo47mtarph4w=,size_20,color_FFFFFF,t_70,g_se,x_16

完父传子结束下面看子传父 ↓

-------------------------------------------------------------------------------------------------------------------------

子组件向父组件传值
所谓子组件向父组件传值其实就是让父组件获取子组件的数据
第一种方法也是最常用的一种方法子组件通过绑定事件触发函数
具体实现：子组件通过绑定事件触发函数，在函数设置this.$emit(‘要派发的自定义事件’，要传递的值‘），父组件使用@自定义属性接收事件，作为函数在父组件使用以此操作子组件的值,子组件传的数据,作为父组件的形参
第二种方法 $children
在父组件写this.$children 是用该方法可以获取到组件的所有子组件该方法的缺点很明显,一个父组件可以获取到所有子组件的数据方法,找到某一个不太容易
在父组件打印this 里面有$children 里面就有子组件的数据,在父组件可以定义一个值,将获取的子组件赋值定义的值就可以在父组件使用子组件的数据
子组件完下面看非父子组件传值
---------------------------------------------------------------------------------------------------------
非父子组件传值
第一在main.js, new Vue()赋值给Vue.prototype.$bus

在组件A中使用this.$bus.$emit('触发的事件','发送的值') 传给兄弟组件B

组件B使用this.$bus.$on("接收组件A的事件",(v)=>{console.log(v)}) // v是组件A的值作为形参写在组件B的回调函数中,这里如果不用箭头函数,this指向$bus,使用箭头函数this指向组件事例

//  首先在main.js中给全局挂在一个bus对象  
//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false// 这种注册组件的方式叫做全局自定义组件

Vue.prototype.$bus = new Vue()
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

// 在需要传递数据的组件中   组件A
<template>
    <div @click="sendData">这是组件一</div>
</template>
<script>
export default {
    data() {
        return {
            money: "我又五毛，买不起辣条"
        }
    },

    methods: {
        sendData() {
            // console.log(this);
            this.$bus.$emit('getData', this.money)
        }
    }
}
</script>
// 在需要接收数据的组件中  组件B
<template>
    <div>{{msg}}</div>
</template>
<script>
export default {
    data() {
        return {
            msg: ''
        }
    },
    created() {
        // $on监听方法  他的第一个参数是要监听的函数的函数名 第二个是回调函数
        this.$bus.$on('getData', (data) => {
            this.msg = data
        })

        // 关闭监听事件的方法是 this.$bus.$off('事件名')
    beforeDestroy() {
     // 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
     this.$bus.$off('getData')
        },
    }
}
</script>

完毕

You must trust that your beliefs are unique, your own.
你们要相信，自己的信念独一无二。