【3】双向绑定:
需要使用“.sync”作为修饰词
如示例:
<div id="app">
父组件:
<input v-model="val"><br/>
子组件:
<test :test.sync="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components: {
"test": {
props: ['test'],
template: "<input v-model='test'/>"
}
}
});
</script> 效果是无论你改哪一个的值,另外一个都会随之变动。
【4】props验证:
简单来说,当组件获取数据时,进行验证,只有符合条件的时候,才会使用之。
写法是将props变为一个对象,被验证是值是对象的key,验证条件是和key对应的value。
例如:
props: {
test: {
twoWay: true
}
}, 验证test这个变量是不是双向绑定,如果不是,则报错。(注意,这个不能用于验证单向绑定)。
示例代码如下:
<div id="app">
父组件:
<input v-model="val"><br/>
子组件:
<test :test="val"></test>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
val: 1
},
components:{
test:{
props: {
test: {
twoWay: true
}
},
template: "<input v-model='test'/>"
}
}
});
</script>更多验证类型请查看官方教程:
http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1
以上所述是小编给大家介绍的Vuejs第九篇之组件作用域及props数据传递实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!










