（15）打鸡儿教你Vue.js

组件化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

巴特西

（15）打鸡儿教你Vue.js

请点赞！因为你的鼓励是我写作的最大动力！

最新文章

热门文章