vue子组件和父组件动态交互
组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。
一、父子组件传参数是通过属性props来实现的,需要在子组件内定义一个属性来接收父组件传过来的值;父组件要做的是双向绑定一个参数、给参数赋值。
子组件:
1.要用brainstormData属性,此时属性是没有值的,父组件还没给它传值。
2.定义属性:brainstormData,写上类型:Array
父组件:
1.引入、注册组件:
2.为组件双向绑定属性,属性的值为一个参数,通过给参数赋值来实现为绑定的属性传值
3.在Data(){}中定义要用到的参数
4.为joinBrains赋值,值为从后端接收到的数据
二、父子组件传函数是通过$emit实现的,当子组件的方法需要在被引用后扩展的时候,$emit就发挥了作用。子组件需要用$emit来接收父组件传进来的方法,父组件要写具体的此方法步骤。
子组件:
1.点击触发方法,参数是父组件传过来的值
2.在methods里定义方法,方法内容是用$emit接收父组件传来的方法
父组件:
1.省略引入组件
2.@子组件的方法名,用来和子组件绑定,绑定的值为父组件中要具体去执行的方法的方法名
3.方法具体要做的是带着参数跳转页面
三、单向数据流
父级的prop数据的更新,会向下流动到子组件中,反过来不行
父组件能够修改子组件中的数据,而子组件不能直接修改父组件中的数据
作用:
防止子组件意外变更状态,会影响父组件中的状态或者数据
以下是具体的实例
1)父组件向子组件传参
父组件使用prop属性,向子组件传参
<div id="app">"
<my-com :title="title" msg="hello"></my-com>
</div>
动态传参
没有:传递的常量字符串
有: 传递boolean、number、对象、数组、变量
子组件接受参数
let component = {
props: ['title','msg'],
}
props校验
let component = {
props: {
title: {
type: String, // 验证数据类型
required: true, // 该参数必需传递的参数
// 基本数据类型直接写在default后面
default: '你好', // 当前参数的默认值
// 引用数据类型,使用工厂函数的形式返回一个对象或者数组
default() {
return { }
}
validator(val) { // 自定义的验证器
return val.length > 3
}
}
},
}
2)子组件向父组件传参
<div id="app">"
<my-com @son-handler="fatherHandler" msg="hello"></my-com>
</div>
let component = {
data() {
return {
comMsg: '我是子组件数据'
}
},
template:`
<div>
<button @click='clickHandler'>发送事件</button>
</div>
`,
methods: {
clickHandler() {
this.$emit('son-handler', this.comMsg)
}
}
}
new Vue({
el:'#app',
data: {
fatherDate: ''
},
methods: {
fatherHandler(val) {
// val就是子组件发送事件时,携带的参数this.comMsg
this.fatherDate = val
}
},
components: {
myCom: component
}
})