概述
Vue 非单文件组件的创建与使用。
知识点
- 组件的定义 ：组件是能实现某个功能或具有某种属性的代码和资源集合。
- 创建非单文件组件需要3个步骤：
- 创建组件
- 注册组件
- 使用组件
创建组件
使用Vue.extend(options)创建，格式与new Vue时几乎一样，但是这里有两点要注意；
- 不需要写el,因为组件是可复用的，不能固定在某一容器内。
- data必须写成函数,如果写成对象，这样组件复用时会引用同一个数据，所以只能写成函数形式，不同的组件data数据才会互不干扰。
- 如下图创建了2个组件：school 组件和student组件
1 //创建school组件 2 const school =Vue.extend({ 3 template:`<div> 4 <h2>学校：{{schoolName}}</h2> 5 <h2>地址：{{address}}</h2> 6 </div>`, 7 data(){ 8 return{ 9 schoolName:'城西小学', 10 address:'南京市鼓楼区' 11 } 12 13 } 14 }); 15 //创建student 组件 16 const student =Vue.extend({ 17 template:`<div> 18 <h2>学生：{{studentName}}</h2> 19 <h2>年龄：{{age}}</h2> 20 <h2>成绩：{{score}}</h2> 21 <button @click=add>请点击我，成绩加一</button> 22 </div>`, 23 data(){ 24 return{ 25 studentName:'李在容', 26 age:14, 27 score:56 28 } 29 }, 30 methods:{ 31 add(){ 32 this.score++; 33 } 34 } 35 });
注册组件
- 注册局部组件
- 在new Vue中使用components选项实现组件局部注册。
- 如下图，我们在容器root 和root2上注册了相同的局部组件。
var vm=new Vue( { el:'#root', //注册局部组件 components:{ xuexiao:school, xuesheng:student } } ) var vm2=new Vue( { el:'#root2', //注册局部组件 components:{ xuexiao:school, xuesheng:student } } )
- 注册全局组件
- 使用Vue.component(组件名,组件)。
- 如下图, 定义了一个组件，然后注册成全局组件。
1 //创建hello组件 2 const hello =Vue.extend({ 3 template:`<div> 4 hello 5 </div>`, 6 data(){ 7 return{ 8 msg:'我是hi组件', 9 } 10 }, 11 methods:{ 12 add(){ 13 this.score++; 14 } 15 } 16 }); 17 //注册全局组件 18 Vue.component('hello',hello);
使用组件
- 如下代码: 创建了3个组件student, school , hello组件
- student 和 school组件被注册成局部组件，hello组件注册成全局组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root" style="border: 1px solid yellow; margin-top: 50px;"> <!-- 编写组件标签 --> 我使用的是局部组件 <xuexiao></xuexiao> <hr> <xuesheng></xuesheng> </div> <div id="root3" style="border: 1px solid rgb(17, 0, 255); margin-top: 50px;"> 使用全局组件 <hello></hello> </div> <div id="root2" style="border: 1px solid red; margin-top: 50px;"> <!-- 编写组件标签 --> 我使用的是局部组件 <xuexiao></xuexiao> <hr> <xuesheng></xuesheng> </div> </body> <script type="text/javascript"> Vue.config.productionTip=false;//阻止Vue在启动时生成生产提示 //创建school组件 const school =Vue.extend({ template:`<div> <h2>学校：{{schoolName}}</h2> <h2>地址：{{address}}</h2> </div>`, data(){ return{ schoolName:'城西小学', address:'南京市鼓楼区' } } }); //创建student 组件 const student =Vue.extend({ template:`<div> <h2>学生：{{studentName}}</h2> <h2>年龄：{{age}}</h2> <h2>成绩：{{score}}</h2> <button @click=add>请点击我，成绩加一</button> </div>`, data(){ return{ studentName:'李在容', age:14, score:56 } }, methods:{ add(){ this.score++; } } }); var vm=new Vue( { el:'#root', //注册局部组件 components:{ xuexiao:school, xuesheng:student } } ) var vm2=new Vue( { el:'#root2', //注册局部组件 components:{ xuexiao:school, xuesheng:student } } ) var vm3=new Vue( { el:'#root3', } ) //创建hello组件 const hello =Vue.extend({ template:`<div> hello </div>`, data(){ return{ msg:'我是hi组件', } }, methods:{ add(){ this.score++; } } }); //注册全局组件 Vue.component('hello',hello); </script> </html>
效果图
- 使用上面的代码执行后的效果如下
- 如下图，虽然root和root2使用了相同的组件，但是每个组件互不影响。第一个组件里的年龄是59，第二个组件的年龄是56：
标签：school,Vue,注册,非单,student,组件,hello From： https://www.cnblogs.com/smallstone/p/18069052