一、定义
组件：应用界面上一个个的区块。
自定义的HTML元素。
二、创建和注册
- Vue.extend() 扩展，创建组件构造器
- Vue.component()注册组件,2个参数，1为标签，2是组件构造器
- Vue实例范围使用组件
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})
// 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<!--该组件不会被渲染-->
<my-component></my-component>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<div>This is a component!</div>'
})
Vue.component('my-component', myComponent)
var app1 = new Vue({
el: '#app1'
});
var app2 = new Vue({
el: '#app2'
})
</script>
</html>
三、全局注册和局部注册
//全局注册 Vue.component('my-component', myComponent) new Vue({ el: '#app' }); //局部注册 new Vue({ //只能在#app元素下使用 el: '#app', components: { // 2. 将myComponent组件注册到Vue实例下 'my-component' : myComponent } });
四、父子组件
父子组件：组件中再定义并使用其他组件。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<parent-component>
</parent-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//子组件构造器
var Child = Vue.extend({
template: '<p>This is a child component!</p>'
})
//父组件构造器
var Parent = Vue.extend({
// 在Parent组件内使用<child-component>标签
template :'<p>This is a Parent component</p><child-component></child-component>',
//引用子组件
components: {
// 局部注册Child组件，该组件只能在Parent组件内使用
'child-component': Child
}
})
// 全局注册Parent父组件
Vue.component('parent-component', Parent)
new Vue({
el: '#app'
})
</script>
</html>
五、组件注册语法糖
//全局注册 Vue.component('my-title1',{ template:'<div>This is the first component!</div>' }) var vm1 = new Vue({ el:'#app1' }) var vm2 = new Vue({ el:'#app2', components:{ // 局部注册，my-title2是标签名称 'my-title2': { template: '<div>This is the second component!</div>' }, // 局部注册，my-title3是标签名称 'my-title3': { template: '<div>This is the second component!</div>' }, } })
六、script和template标签
script
使用script标签时，type为text/x-template，是让浏览器忽略标签内容
template
不需要指定type，从用法上来看，就像是script的简化版。
七、el和data选项
el
只由new创建的实例中使用
提供已存在的DOM元素为Vue实例的挂载目标。决定其作用域。
data
只接受function。
实例的数据对象，Vue会将data属性转为getter/setter，让data响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
Vue.component('my-component', { data: function(){ return {a : 1} } })
八、props
组件实例有自己的作用域，如果想在组件里使用其他组件的数据，可以使用props传递(默认是单向绑定)
普通绑定
var vm = new Vue({ el: '#app', data: { name: 'keepfool', age: 28 }, components: { 'my-component': { template: '#myComponent', props: ['myName', 'myAge']//定义props属性 } } })
<template id="myComponent"> <table>//表格 <tr>//一行 <th colspan="2">//colspan代表占几个格子 //子组件数据 </th>//标题 </tr> <tr>// <td>my name</td> <td>{{ myName }}</td>//获取数据 </tr> <tr> <td>my age</td> <td>{{ myAge }}</td>//获取数据 </tr> </table> </template>
<div id="app"> //绑定数据 <my-component v-bind:my-name="name" v-bind:my-age="age"></my-component> </div>
双向绑定
使用.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>