一. 创建school组件
举例:
const school = Vue.extend({ template:` <div> <h1>我是创建的school组件</h1> <h1>11111111111111</h1> </div> `, data() { return { userName:"张三" } }, methods:{ func1(){ return 100; } } })
二. 全局注册组件
例:
Vue.component("school",school); var vm = new Vue({ el:"#app", data() { return { userName:"李四" } }, components:{ school, }, methods: { }, })
三. 使用自定义组件规则
1.定义组件中不要绑定el
2.data必须使用函数写法
3.注册时可以取别名,别名不可以驼峰命名,需要使用-连接,不能使用已有的标签作为名称
4.模板时只能有一个父级,只在vue2中
5.未搭建脚手架使用单标签会使后面代码都不渲染
例:
Vue.config.productionTip = false; const student = Vue.extend({ template:` <div> <h1>我是student组件</h1> <ccc></ccc> </div> `, }) const nameList = { template:` <div> <h1>我是nameList组件</h1> </div> `, } Vue.component("ccc",nameList); const school = Vue.extend({ template:` <div> <h1>我是school组件</h1> <bbb></bbb> </div> `, components:{ bbb:student } }) var vm = new Vue({ el:"#app", methods: { }, components:{ School:school, abc:student, "student-puls":student, "studentPuls":student, aaa:nameList, } })
注: <studentPuls></studentPuls>不可以在不搭建脚手架使用
四. day16.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <school/> </div> </body> <script src="../vue.js"></script> <script> Vue.config.productionTip = false; const school = Vue.extend({ template:`<h1>学校的组件</h1>`, mounted() { console.log(this); }, }) var vm = new Vue({ el:"#app", data() { return { } }, mounted() { console.log(this); }, components:{ school }, methods: { }, }) console.log(vm); </script> </html>