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