props数据传递的实例代码(2)

<div> 父组件: <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> 父组件: <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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwwpwy.html