在进行组件传值之前需要先掌握以下基础知识:
1:传值类型:
除了可以传递string外,还可以向子组件传递数字,布尔,数组,对象。
需要注意的是在传递数据时,即便数据是静态的我们仍然需要使用v-bind,来告诉vue这是一个数字/布尔/数组/对象而非字符串:
//v-bind告诉vue这是一个数字而非字符串
<module-title Mtitle="热游推荐" :tagType="1"></module-title>
传递布尔时:prop没有值意味着值为true。若值为false,即便false是一个静态值,我们仍然需要使用v-bind来告诉vue这是一个布尔值而非字符串。
//is-published没有值意味着值实际上为true
<blog-post is-published></blog-post>
//使用v-bind告诉vue这是一个布尔值false,v-bind可简写为:
<blog-post v-bind:is-published="false"></blog-post>
传递数组:
<btn :nubArr="[11,22,33]"></btn>
传递对象:
<btn :obj="{name;'按钮',type:1}"></btn>
2:prop验证:
我们可以在子组件内对父组件传递过来的值进行验证,以及设置默认值,设置是否必传。若传递过来的值与子组件预期的值类型不一致则会报错。
type:规定数据类型,default:设置数据默认值,required:规定是否必须。
例如:
props:{
// title
Mtitle:{
//规定数据类型
type:String,
//规定是否必传
required: true
},
// 标签类型,0没有,1为hot,2为new,3为礼包
tagType:{
type:Number,
//设置默认值
default:0
},
// 是否有右侧按钮,0没有,1有
more:{
type:Number,
default:1
},
}
vue还提供自定义验证函数:
props:{
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
3:单向数据流:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。
也就是说子组件是不可以改变父组件传递过来的值,那么如果我们需要对传递过来的值进行操作该怎么办?
有两种方法:1:在data中定义一个数据,将传递过来的值作为初始值,然后操作data定义的这个数据。
2:通过计算属性
组件传值:
1:父组件向子组件传值:
父组件可以向子组件传递静态或动态的值。子组件通过props来接收父组件传递过来的值。
--传递静态值:
父组件内使用自组件并传递静态值:Mtitle
<module-title Mtitle="热游推荐"></module-title>
在子组件内通过props来接收父组件传递的值:
props:{
// title
Mtitle:{
type:String,
required: true
},
},
使用父组件传递过来的值:
使用与data内值的使用方式一样,直接通过this.值名称即可获取使用。
--传递动态值:
<module-title Mtitle="热游推荐" :btnName="this.btnName"></module-title>
传递动态值需要使用v-bind
动态赋值。
2:子组件向父组件传值:
在vue中子组件是无法直接向父组件传值的,只能通过触发方法的形式通过this.$emit()传递值。在父组件中监听子组件事件来获取值。
子组件:
<template>
<p>我是子组件</p>
<div class="btn" @click="go">按钮</div>
</template>
<script>
export default{
name;"Btn",
data(){
return {
name:"啦啦啦"
}
},
methods:{
//定义go方法
go(){
//通过this.$emit()向父组件发送消息
//子组件发射自定义事件tigger 并携带要传递给父组件的值,
// 如果要传递给父组件很多值,这些值要作为参数依次列出 如this.$emit('tigger', "哈哈哈",this.name);
this.emit("tigger","这是传递的数据")
}
}
}
</script>
父组件内:
<template>
<p>我是父组件</p>
//使用子组件并监听
<Btn @triggrt="eventGo()"></Btn>
</template>
<script>
//引入子组件
import Btn from ...
export default{
name;"Btn",
components:{
Btn
},
data(){
return {}
},
methods:{
//定义go方法
eventGo(vulue){
console.log(value)
//打印哈哈哈
}
}
}
</script>