组件化vue.js
组件单向绑定
组件双向绑定
组件单次绑定
创建组件构造器
注册组件
使用组件
Vue.extend()
Vue.component()
使用组件
<div id="app">
<my-component></my-component>
</div>
<script src="js/vue.js"></script>
// 创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>my</div>'
})
// 注册组件
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
全局注册和局部注册
局部注册的方式：
new Vue({
el: '#app',
components: {
'my-component' : myComponent
}
});
| | <!DOCTYPE html> |
| | <html> |
| |
|
| | <head> |
| | <meta charset="UTF-8"> |
| | <title></title> |
| | <link rel="stylesheet" href="[styles/demo.css](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/styles/demo.css)" /> |
| | </head> |
| |
|
| | <body> |
| |
|
| | <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> |
| | </body> |
| | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
| | <script> |
| | var vm = new Vue({ |
| | el: '#app', |
| | data: { |
| | name: 'keepfool', |
| | age: 28 |
| | }, |
| | components: { |
| | 'my-component': { |
| | template: '#myComponent', |
| | props: ['myName', 'myAge'] |
| | } |
| | } |
| | }) |
| | </script> |
| |
|
| | </html> |
组件注册语法糖
Vue.component()
// 全局注册：
Vue.component('my-component', {
template: '<div>this is the first component!</div>'
})
var vm1=new Vue({
el: '#app'
})
局部注册：
var vm = new Vue({
el: '#app',
components: {
// 局部注册
'my-component': {
template: '<div></div>'
},
}
})
| <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title></title> |
| | </head> |
| | <body> |
| | <div id="app1"> |
| | <my-component1></my-component1> |
| | </div> |
| | ---------------app1和ap2的分割线--------------- |
| | <div id="app2"> |
| | <my-component1></my-component1> |
| | <my-component2></my-component2> |
| | <my-component3></my-component3> |
| | </div> |
| | </body> |
| | <script src="[js/vue.js](https://keepfool.github.io/vue-tutorials/02.Components/Part-1/js/vue.js)"></script> |
| | <script> |
| | |
| | // 全局注册，my-component1是标签名称 |
| | Vue.component('my-component1',{ |
| | template: '<div>This is the first component!</div>' |
| | }) |
| | |
| | var vm1 = new Vue({ |
| | el: '#app1' |
| | }) |
| | |
| | var vm2 = new Vue({ |
| | el: '#app2', |
| | components: { |
| | // 局部注册，my-component2是标签名称 |
| | 'my-component2': { |
| | template: '<div>This is the second component!</div>' |
| | }, |
| | // 局部注册，my-component3是标签名称 |
| | 'my-component3': { |
| | template: '<div>This is the third component!</div>' |
| | } |
| | } |
| | }) |
| | |
| | </script> |
| | </html> |
| |
<!DOCTYPE html>
<html>
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
<div>this is a component</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
使用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>this is a component</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
使用props
var vm = new Vue({
el: '#app',
data: {
name: 'jeskson',
age: 0
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
如果我们想使父组件的数据，则必须先在子组件中定义props属性
定义子组件的html模板：
<template id="myComponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{ myName }}</td>
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>
将父组件数据通过已定义好的props属性传递给子组件：
<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
在prop中定义的myName，在用作特性时需要转换为my-name
prop的绑定类型
单向绑定-修改了子组件的数据，没有影响父组件的数据
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component">
<template id="myComponent">
<table>
<tr>
<ht colspan="3">子组件数据</td>
</tr>
<tr>
<td>my name</td>
<td>{{ myName}}</td>
<td><input type="text" v-model="myName"/></td>
<tr>
<td>my age</td>
<td>{{myAge}}</td>
<td><input type="text" v-model="myAge"/></td>
</tr>
</table>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<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>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
双向绑定
使用.sync
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<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.sync="name" v-bind:my-age.sync="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>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
单次绑定：
使用.once
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>
修改了数据，也不会传导给子组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/demo.css" />
</head>
<body>
<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.once="name" v-bind:my-age.once="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>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age: 28
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774