创建组件构造器
组件注册
使用组件
简单示例
<!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>
这个示例更能说明问题
<!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>
<!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>{{title}}</h2> <p>line1</p> <p>line2</p> <p>line3</p> </div> </script> <script> const father_component = Vue.extend({ template: "#father_component_id", // 注意，这里的data必须是函数的形式来对应上面的模板数据， {{title}} // 必须是函数形式传递， 而且不能在app中的data中调用，组件有自己的data // 如果不这么调用，会报错！！！ data(){ return { title: "Hello ,this is a father component!" } } }) var app = new Vue({ el: "#app", components: { father_component: father_component } }) </script> </html>
原文：https://www.cnblogs.com/renfanzi/p/13204750.html
