Props在vue组件中各种角色总结
在Vue中组件是实现模块化开发的主要内容，而组件的通信更是vue数据驱动的灵魂，现就四种主要情况总结如下：
使用props传递数据—组件内部
//html
<div id="app1">
<i>注意命名规定：仅在html内使用my-message</i>
<child my-message="组件内部数据传递"></child>
</div>
//js
<script>
Vue.component('child', {
props: ['myMessage'],
template: '<mark>{{ myMessage }}<mark/>'
});
new Vue({
el: '#app1'
})
</script>动态props通信—组件与根节点(父子之间)
<div id="app2">
<input v-model="parentMsg">
<br>
<child :parent-msg="parentMsg"></child>
</div>
<script>
Vue.component('child', {
props: ['parentMsg'],
template: '<mark>{{ parentMsg }}<mark/>'
});
new Vue({
el: '#app2',
data: {
parentMsg: 'msg from parent!'
}
})
</script>
对比分析：
例子1:
<comp some-prop="1"></comp>
//组件内部数据传递，对应字面量语法:传递了一个字符串"1" 例子2:
<comp v-bind:some-prop="1"></comp>
//组件与根节点数据传递，对应动态语法:传递实际的数字:js表达式 单向数据流动特点：父组件属性变化时将传导给子组件，反之不可
两种改变prop情况
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
//定义一个局部data属性，并将 prop 的初始值作为局部数据的初始值
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
//定义一个局部computed属性，此属性从 prop 的值计算得出
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
子组件索引
尽管有 props 和 events ，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID
<div id="parent">
<!-- vm.$refs.p will be the DOM node -->
<b ref="p">hello</b>
<!-- vm.$refs.child will be the child comp instance -->
<user-profile v-for='i in 3' ref="profile"></user-profile>
