组件步骤
创建组件构造器
组件注册
使用组件
简单示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <aaa></aaa> </div> </body> <script src="vue.js"></script> <script> const cpnC = Vue.extend({ template:"<p>hello world!</p>>" }) Vue.component("aaa", cpnC) new Vue({ el:"#app" }) // 这个步骤很关键，因为要实例化，如果不实例化，找不到aaa </script> </html>
也可以放一起
Vue.component("aaa", cpnC)
new Vue({
el:"#app"，
component：{
aaa：cpnC
}
})
父子组件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <father_component></father_component> </div> </body> <!-- 先引入 Vue --> <script src="vue.js"></script> <script> const son_component = Vue.extend({ template: ` <div> <h2>Hello , this is son component</h2> <p>line1</p> <p>line2</p> <p>line3</p> </div> `, }) const father_component = Vue.extend({ template: ` <div> <h2>Hello , this is father component</h2> <p>line1</p> <p>line2</p> <p>line3</p> <son_component></son_component> </div> `, components: { son_component: son_component } }) var app = new Vue({ el: "#app", components: { father_component: father_component } }) </script> </html>
组件抽离写法--语法糖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <father_component></father_component> </div> </body> <!-- 先引入 Vue --> <script src="vue.js"></script> <script type="text/x-template" id="father_component_id"> <div> <h2>Hello , this is father component</h2> <p>line1</p> <p>line2</p> <p>line3</p> </div> </script> <script> const father_component = Vue.extend({ template: "#father_component_id" }) var app = new Vue({ el: "#app", components: { father_component: father_component } }) </script> </html>
组件data传输数据，data必须是函数
这个示例更能说明问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <click_cpn></click_cpn> <click_cpn></click_cpn> <click_cpn></click_cpn> </div> </body> <!-- 先引入 Vue --> <script src="vue.js"></script> <script type="text/x-template" id="click_cpn_id"> <div> <div>{{counter}}</div> <button v-on:click="add">-</button> <button v-on:click="sub">+</button> </div> </script> <script> const click_cpn = Vue.extend({ template: "#click_cpn_id", data(){ return { counter: 0 } }, methods:{ add(){ // 注意， 这里的写法，一定要这样写才可以， add: function(){}这样写报错 this.counter += 1 }, sub() { this.counter -= 1 } } }) var app = new Vue({ el:"#app", components:{ // 这里是components 不是component click_cpn, click_cpn } }) </script> </html>