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 来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态

Logo

前往低代码交流专区

更多推荐