VUE的props理解

vue的组件之间是独立的，为了在组件之间传递数据，我们需要用到不同的手段。
父组件->子组件：props
子组件->父组件：触发事件

image
在这里首先要理清一个概念，什么是父组件和子组件？是好像HTML的父元素和子元素一样吗？
根据Vue.js官方文档来推断：
1.组件 A 在它的模板中使用了组件 B。
2.父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

假定someChildProperty是子组件的属性，上例不会如预期那样工作。父组件模板并不感知子组件的状态。
如果要绑定子组件作用域内的指令到一个组件的根节点，你应当在子组件自己的模板里做：

Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template:'<div v-show="someChildProperty">Child</div>',
data:function(){
return{
someChildProperty:true
}
}
})

好了，根据上述，我们可以推断，在上例中，child-component是父组件，而template的内容是为子组件。
这个推断是否正确呢？我在百度上参考了别人的一些说法，有的则声称其实在自定义组件childcomponent的一个实例前面会生成一个隐藏的根元素，父组件就是这个根元素。
在SF的一个提问里面有各种说法，令人疑惑。

---

等我捋清楚再说，这里暂定推断是对的

props用于父组件向子组件传递数据，常配合bind指令使用
示例：

<div id="test">
<input v-model="parentmsg">
<child-compo :childmsg="parentmsg"></child-compo>
</div>
<script>
        var vm = new Vue({
            el: '#test2',
            data: {
                parentmsg: ''
            },
            components: {
                'child': {
                    props: ["childmsg"],
                    template: '<span>{{childmsg}}</span>'
                }
            }
        })

})
</script>

别搞错了，父组件不是input，这里使用input双向绑定parentmsg是为了动态定义传给父组件的数据，这里传给了父组件绑定的childmsg，而在组件的定义中props是["childmsg"]，ok，这样子组件就和父组件连通了，所以template中可以调用childmsg。
返朴归真一下，我们不要动态，而是耿直地直接传一个定值：

<div id="test">
<input v-model="parentmsg">
<child-compo childmsg="this is child msg"></child-compo>
</div>

这样应该更好理解props传值的过程~
另外props还具备验证机制，当传入props的数据不符合验证的时候，会给出警告。
这里props的写法是：

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生构造器：

• String
• Number
• Boolean
• Function
• Object
• Array

• Symbol
  注意一下，如果vue.js使用的是生产版本（压缩版本），后台是不会报错的，所以要记得去官网下载开发版本！
  配合input双向绑定使用验证机制更佳~

  
  图片.png