以上组件注册的方式有些繁琐,Vue.js为了简化这个过程,提供了注册语法糖
在选项对象的components属性中实现局部注册:
<div id="app2">
<my-demo></my-demo>
<my-demo2></my-demo2>
</div>
<script>
var vm=new Vue({
el:'#app2',
components:{
//局部注册 my-demo是标签名称
'my-demo':{
template:'<h1>嘤嘤嘤!</h1>'
},
//局部注册,my-demo2是标签名称
'my-demo2':{
template:'<h1>keep learning!</h1>'
}
}
})
</script>
图片.png
使用script或template标签
<div id="app">
<demo></demo>
</div>
<template id="my-demo">
<div>上善若水</div>
</template>
<script>
Vue.component('demo',{
template:'#my-demo'
})
new Vue({
el:'#app'
})
</script>
图片.png
这使得HTML代码和JavaScript代码是分离的,便于阅读和维护。
使用props
<div id="app">
<my-demo v-bind:name="name" v-bind:age="age"></my-demo>
</div>
<template id="myDemo">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ name }}</td>
</tr>
<tr>
<td>my age</td>
<td>{{ age }}</td>
</tr>
</table>
</template>
<script>
var vm=new Vue({
el:'#app',
data:{
name:'kobe',
age:27
},
components:{
'my-demo':{
template:'#myDemo',
props:['name','age']
}
}
})
</script>
图片.png
我们想使用父组件的数据 必须在子组件中定义props属性也就是props: ['myName', 'myAge']这行代码
图片.png
prop默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态
在父组件中使用子组件时,通过以下语法将数据传递给子组件:
<child-component v-bind:子组件prop="父组件数据属性"></child-component>
单项绑定
<div id="app">
<table>
<tr>
<th colspan="3">父组件数据</td>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type="text" v-model="name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
双向绑定
可以使用.sync显式地指定双向绑定,这使得子组件的数据修改会回传给父组件。
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
单次绑定
可以使用.once显式地指定单次绑定,单次绑定在建立之后不会同步之后的变化,这意味着即使父组件修改了数据,也不会传导给子组件。
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
网友评论