Vue使用组件的三步

1，创建组件

 1     const school = Vue.extend({
 2         // 为啥要有一个div包着？因为要使用template必须要有一个根元素
 3         template:`
 4             <div>
 5                 <h2>学校是{{schoolName}}</h2>
 6                 <h2>学校的地址是{{schoolAdress}}</h2>
 7             </div>
 8         `,
 9         // data必须写成函数式
10         data(){
11             return {
12                 schoolName:'WIT',
13                 schoolAdress:'ts'
14             }
15         }
16     })

 

2，注册组件

注册分为全局注册和局部注册

全局注册：

（‘组件名’，组件）

1 Vue.component('school', school);

 

局部注册：

1     new Vue({
2         el:'#root',
3         // 注册组件：局部注册
4         components:{
5             // 下一行可以省略为school
6             school:school
7         }
8         
9     })

 

3，使用

1 <body>
2     <div id="root">
3         <school></school>
4         <school></school>
5         <school></school>
6     </div>
7 </body>

 

posted @ 2022-02-26 18:02  沉梦昂志_doc  阅读(66)  评论(0)  编辑  收藏  举报