【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>
更多相关内容:
-
无相关信息
