017_Vue组件
1. 全局组件
1.1. 全局组件注册语法
Vue.component(组件名称, {data: 组件数据,template: 组件模板内容,methods: {} })1.2. 组件使用, 组件可以重用
<div id="app"><组件名称></组件名称><组件名称></组件名称><组件名称></组件名称> </div>1.3. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>全局组件</title></head><body><div id="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 自定义全局组件Vue.component("button-counter", {data: function(){return {count: 0}},template: "<button @click='handle'>点击了{{count}}次</button>",methods: {handle: function(){this.count += 1;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>1.4. 效果图
1.5. 组件的注意事项
1.5.1. data必须是一个函数。
1.5.2. 组件模板内容必须是单个根元素。
2. 模板字符串
2.1. 组件模板内容可以是模板字符串, 模板字符串需要浏览器提供支持(ES6语法), 解决模板内容较长问题。
2.2. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>组件模板字符串</title></head><body><div id="app"><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">Vue.component("button-counter", {data: function() {return {count: 0}},template: `<div><button @click="handlePlus">加加{{count}}</button><button @click="handleMinus">减减{{count}}</button></div>`,methods: {handlePlus: function(){++this.count;},handleMinus: function(){--this.count;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>2.3. 效果图
3. 组件命名方式
3.1. 短横线方式
Vue.component('my-component', {})3.2. 驼峰方式(尽可能不用)
Vue.component('MyComponent', {})3.3. 如果使用驼峰式命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件。
3.4. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>组件命名</title></head><body><div id="app"><hello-world></hello-world><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">// 如果使用驼峰式命名组件, 那么在使用组件的时候, 只能在字符串模板中用驼峰的方式使用组件, 但是在普通的标签模板中, 必须使用短横线的方式使用组件。Vue.component("HelloWorld", {data: function() {return {msg: "HelloWorld"}},template: "<div>{{msg}}</div>"});Vue.component("button-counter", {data: function() {return {count: 0}},template: `<div><button @click="handle">点击了{{count}}次</button><HelloWorld></HelloWorld></div>`,methods: {handle: function(){++this.count;}}});var vm = new Vue({el: "#app",data: {}});</script></body> </html>3.5. 效果图
4. 局部组件
4.1. 局部组件使用方式
4.2. 代码
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>局部组件</title></head><body><div id="app"><hello-world></hello-world><button-counter></button-counter></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var helloWorld = {data: function() {return {msg: "HelloWorld"}},template: "<div>{{msg}}</div>"};var buttonCounter = {data: function(){return {count: 0}},template: "<button @click='handle'>点击了{{count}}次</button>",methods: {handle: function(){this.count += 1;}}}var vm = new Vue({el: "#app",components: {'hello-world': helloWorld,'button-counter': buttonCounter}});</script></body> </html>4.3. 效果图
总结
- 上一篇： 016_Vue数组数据的响应式处理
- 下一篇： 019_Vue子组件向父组件传值