【3】加上v-bind后,如果能找到父组件的值,那么使用父组件的值;如果没有对应的,则将其看做一个js表达式(例如1+2看做3,{a:1}看做是一个对象);
如代码:
<p id="app"> <add v-bind:btn="1+2"></add> </p> <script> var vm = new Vue({ el: '#app', data: { h: "hello" }, components: { "add": { props: ['btn'], template: "<button>btn:{{btn}}</button>" } } }); </script>
这里的btn的值是3(而不是没有加v-bind时,作为字符串的1+2)
⑤props的绑定类型:
【1】简单来说,分为两种类型,即单向绑定(父组件能影响子组件,但相反不行)和双向绑定(子组件也能影响父组件);
【2】单向绑定示例:(默认,或使用.once)
<p id="app"> 父组件: <input v-model="val"><br/> 子组件: <test v-bind:test-Val="val"></test> </p> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, components: { "test": { props: ['testVal'], template: "<input v-model='testVal'/>" } } }); </script>更多相关内容:
-
无相关信息