Vue之props属性
vue props
·
props介绍
在vue中,组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
“prop”是组件数据的一个字段,期望从父组件传下来。子组件需要用 props 选项 声明 props:
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: '<span>{{ message }}</span>'
})
然后向它传入一个普通字符串:
<child message="hello!"></child>
结果显示hello!
props使用:
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
html:
<child my-message="hello!"></child>
输出:hello!
父子组件的数据绑定:
html:
<div>
<input v-model="parentMsg">
<br>
<child :my-message="parentMsg"></child>
</div>
js:
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
注意,props传递数字时,需要使用v-bind:
如果是下面这样:
<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>
实际上传递了一个数字1,应该是:
<!-- 传递实际的数字 -->
<comp v-bind:some-prop="1"></comp>
单向数据流:
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。
通常有两种改变 prop 的情况:
1、prop 作为初始值传入,子组件之后只是将它的初始值作为本地数据的初始值使用;确切的说:定义一个局部 data 属性,并将 prop 的初始值作为局部数据的初始值。
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2、prop 作为需要被转变的原始值传入。定义一个 computed 属性,此属性从 prop 的值计算得出。
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意:在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
更多推荐
已为社区贡献9条内容
所有评论(0)