目录
父组件向子组件传值
-
所谓父组件向子组件传值的本质含义是 让子组件获取到父组件的数据
-
第一种方法 也是最常用方法 自定义属性 先看理解
-
父组件使用自定义属性,将值传到子组件,子组件使用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的图片
子组件在钩子函数中打印父组件数据和方法
完 父传子结束下面看子传父 ↓
-------------------------------------------------------------------------------------------------------------------------
-
子组件向父组件传值
-
所谓子组件向父组件传值 其实就是让父组件获取子组件的数据
-
第一种方法也是最常用的一种方法 子组件通过绑定事件触发函数
-
具体实现: 子组件通过绑定事件触发函数, 在函数设置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.
你们要相信,自己的信念独一无二。