Prop

一、基本用法

Prop的基本用法很简单，作用是在子组件中接收父组件的值

父组件传值

<template>
    <div>
        <Example :data1='data1' :data2='`属性值2`' />    
    </div>
</template>
<script>
    import Example from '@/components/expmple'
    export default {
        components:{
            Example
        }
    }
</script>

子组件接收值

<template>
    <div>
        <h2>{{data1}}</h2>   
        <p>{{data2}}</p>
    </div>
</template>
<script>
export default{
    //接收值 
    props: ['data1','data2'],
}
</script>

二、props接收值的三种写法

1、数组方式

<script>
export default{
    //接收值 
    props: ['data1','data2'],
}
</script>

相当于直接接收消息，不做任何校验。不推荐这种写法

2、简单对象形式

<script>
export default{
    //接收值 
    props: {
        data1: Number,
        data2: String
    },
}
</script>

简单对象形式只对值的类型进行了校验，如果传值类型不一样会报错：
type check failed for prop “msg”. Expected Number with value(类型校验失败，期待数组类型的值)

3、严格对象形式

<script>
export default{
    //接收值 
    props: {
        data1: {
            type: String,
            required: true,
            default: '',
            validator (value) {
              return (value.length < 5)
            }
        },
        data2: {
            type: String,
            required: true,
            default: () => ['', '', '']
        },
    },
}
</script>

严格对象模式，定义了传入值的类型、是否必传、校验规则；如果是复杂对象类型，需使用工厂模式生成默认值，否则会在控制台抛出警告

三、单向数据流

• 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

• 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告

上面是官网上解释，简单说就是porps属性不能直接修改，会报错。

如果需要用到修改后的props值可以使用下面两种方式 ： 通过 data 和 computed

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
},
computed:{
     normalizedSize: function () {
    return this.initialCounter.trim().toLowerCase()
  }
}
  

---

注意事项：对于string、boolean、number 类型的值直接修改浏览器会报错。对于数组和对象类型的值官网是这样说的:

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

也就是说在子组件中修改数组和对象类型的prop值并不会报错，同时可以利用他会改变父组件状态的特性来进行一些操作。

example: table表头通过一个数组list渲染出来，table每一列是否显示可以通过isshow属性控制，
把list传入子组件，在子组件中修改list的值控制table每一列的显示和隐藏。

这个例子中是因为list数组的变化是可控的，对于一些复杂嵌套的属性还是遵循官方文档，不要在子组件中进行修改。

青浅个人博客:www.qingqian.site:9527