vue中的props配置项详解
vue中的props配置项解读
·
1、利用props配置项由 父组件 向 子组件 传值操作,步骤如下:
(1)在父组件中使用子组件的标签里面通过属性绑定向子组件传值,如下代码:
<Demo name="xxx"><Demo/>
(2)子组件通过props配置项接收,如下代码:
·第一种方式(只接受值):
props:["name"]
·第二种方式(接收值并且限制值的类型):
props:{name:String}
·第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String,//限制类型
required:true,//限制必要性
default:"老王"//指定默认值
}}
在此提出一个注意点,props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么可以考虑一下两种方式:
方式一:将props内接收的值赋值给本地data,代码如下:
props: ['demo'],
data: function () {
return {
counter: this.demo
} }
方式二:若prop 以一种原始的值传入且需要进行转换,可以定义一个计算属性,代码如下:
props: ['demo'],
computed: {
normalizedSize: function () {
return this.demo.reverse()
}
}
注意在 JavaScript 中对象和数组是通过引用传入的,所以对于一个数组或对象类型的 prop 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
更多推荐
已为社区贡献1条内容
所有评论(0)