Vue 实现组件化开发

不苒
304 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

组件化开发

1. 注册组件

1.1 全局注册组件语法：

使用的是Vue下的 component 这个API。

示例代码如下：

 <body>
     <div id="app">
         <button-counter></button-counter>
         <!-- 可重复使用，并且都是独立的 -->
         <button-counter></button-counter>
         <button-counter></button-counter>
     </div>
     <script src="js/vue.min.js"></script>
     <script>
         // 组件注册
         Vue.component('button-counter', {
             // 此处的data必须是一个函数
             data: function () {
                 return {
                     count: 0
                 }
             },
             template: '<button @click="handle">点击了{{count}}次</button>',
             methods: {
                 handle: function () {
                     this.count += 2;
                 }
             }
         });
         var vm = new Vue({
             el: '#app',
             data: {},
         })
     </script>
 </body>

1.2 组件注册注意事项

  1. data必须是一个函数

  2. 组件模板内容必须是单个根元素

  3. 组件模板内容可以是模板字符串

    • 模板字符串呢需要浏览器提供支持（ES6语法）

示例代码如下：

 <script>
         // 组件注册
         Vue.component('button-counter', {
             // 1.此处的data必须是一个函数
             data: function () {
                 return {
                     count: 0
                 }
             },
             /* 2.组件模板内容必须是单个根元素  想这样加个大的div也行*/
             // template: '<div><button @click="handle">点击了{{count}}次</button><button>测试</button></div>',
             // 3.template也可以是模板字符串
             template: `<div>
                 <button @click="handle">点击了{{count}}次</button>
                 <button>测试</button>
             </div>`,
             methods: {
                 handle: function () {
                     this.count += 2;
                 }
             }
         })
         var vm = new Vue({
             el: '#app',
             data: {},
         })
     </script>
  1. 组件命名方式
  • 短横线方式
 Vue.component('button-counter', {})
  • 驼峰方式(首字母大写)
 Vue.component('ButtonCounter', {})

示例代码如下：

 <body>
     <div id="app">
         <!-- 使用方法 -->
         <button-counter></button-counter>
     </div>
     <script src="js/vue.min.js"></script>
     <script>
         // 组件注册 - 驼峰式命名方法
         Vue.component('ButtonCounter', {
             data: function () {
                 return {
                     msg: 'NiHao'
                 }
             },
             template: `<div>{{msg}}</div>`,
         })
         var vm = new Vue({
             el: '#app',
             data: {},
         })
     </script>
 </body>

1.3 局部组件注册

 <body>
     <div id="app">
         <!-- 使用方法 -->
         <hello-world1></hello-world1>
         <hello-world2></hello-world2>
         <hello-world3></hello-world3>
     </div>
     <script src="js/vue.min.js"></script>
     <script>
         // 局部组件注册 
         // 局部组件只能在注册 他的父组件中使用
         var HelloWorld1 = {
             data: function () {
                 return {
                     msg: 'HelloWorld1'
                 }
             },
             template: `<div>{{msg}}</div>`,
         } 
         var HelloWorld2 = {
             data: function () {
                 return {
                     msg: 'HelloWorld2'
                 }
             },
             template: `<div>{{msg}}</div>`,
         }
         var HelloWorld3 = {
             data: function () {
                 return {
                     msg: 'HelloWorld3'
                 }
             },
             template: `<div>{{msg}}</div>`,
         }
 ​
         var vm = new Vue({
             el: '#app',
             data: {},
             components: {
                 'hello-world1':HelloWorld1,
                 'hello-world2':HelloWorld2,
                 'hello-world3':HelloWorld3,
             }
         })
     </script>
 </body>

2. 组件间数据交互

2.1 父组件向子组件传值

2.1.1 组件内部通过props接收传递过来的值

 Vue.component('menu-item',{
     props:['title'],
     template:'<div>{{title}}</div>'
 })

2.1.2 父组件通过属性值将值传递给子组件

 //方式一：
 <menu-item title='来自父组件的数据'></menu-item>
 //方式二：
 <menu-item :title="title"></menu-item>

示例代码如下：

 <body>
     <div id="app">
         <div>{{pmsg}}</div>
         <!-- 子组件的内容：title为父组件以属性方式传值 -->
         <menu-item title="这是来自父组件以属性的方式传来的值"></menu-item>
         <!-- 动态静态结合使用传值 -->
         <menu-item :title="ptitle" content='hello'></menu-item>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 父组件向子组件中传值
         Vue.component('menu-item', {
             props: ['title', 'content'],
             data: function () {
                 return {
                     msg: '子组件本身的数据'
                 }
             },
             template: '<div>{{msg + "------" + title + "------" + content}}</div>'
         });
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {
                 pmsg: '这里是父组件中的内容',
                 ptitle: '动态绑定属性'
             }
         });
     </script>
 </body>

2.1.3 props 属性名规则

  • 在props中使用驼峰形式，模板中需要使用短横线的形式
  • 字符串形式的模板中没有这个限制

示例代码如下：

 <body>
     <div id="app">
         <div>{{pmsg}}</div>
         <menu-item :menu-title="ptitle"></menu-item>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 父组件向子组件中传值 - 属性名规则
         Vue.component('third-com', {
             props: ['testTitle'],
             template: '<div>{{testTitle}}</div>'
         });
         Vue.component('menu-item', {
             props: ['menuTitle'],
             /*  在props中使用驼峰形式，模板中需要使用短横线的形式
                 字符串形式的模板中没有这个限制 */
             template: '<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>'
         });
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {
                 pmsg: '这里是父组件中的内容',
                 ptitle: '动态绑定属性'
             }
         });
     </script>
 </body>

2.1.4 props属性值类型

  • 字符串 String
  • 数值 Number
  • 布尔值 Boolean
  • 数组 Array
  • 对象 Object
 <body>
     <div id="app">
         <div>{{pmsg}}</div>
         <menu-item :pstr='pstr' :pnum='pnum' :pboo='pboo' :parr='parr' :pobj='pobj'></menu-item>
     </div>
     <script src="js/vue.js"></script>
     <script>
         Vue.component('menu-item', {
             props: ['pstr','pnum','pboo','parr','pobj'],
             template: `
             <div>
                 <div>{{pstr}}</div>
                 <div>{{pnum}}</div>
                 <div>{{pboo}}</div>
                 <ul>
                     <li :key='index' v-for='(item,index) in parr'>{{item}}</li>    
                 </ul>
                 <div>
                     <span>{{pobj.name}}</span>    
                     <span>{{pobj.age}}</span>
                 </div>
             </div>
             `
         });
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {
                 pmsg: '这里是父组件中的内容',
                 pstr: 'hello',
                 pnum: 13,
                 pboo: 'true',
                 parr: ['apple', 'banana', 'orange'],
                 pobj: {
                     name: 'lisi',
                     age: '19'
                 }
             }
         });
     </script>
 </body>

2.2 子组件向父组件传值

2.2.1子组件通过自定义事件向父组件传递信息>

 <button v-on:click='$emit("enlarge-text")'>扩大字体</button>

2.2.2 父组件监听子组件的事件

 <menu-item v-on:enlarge-text='fontSize + 3'></menu-item>

上述两个步骤的综合示例代码如下：

 <body>
     <div id="app">
         <div :style='{fontSize:fontSize + "px"}'>{{pmsg}}</div>
         <menu-item @enlarge-text='handle'></menu-item>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 子组件向父组件中传值-基本用法。props传值数据原则：单向数据流
         Vue.component('menu-item', {
             props: ['fontSize'],
             template: /*  $emit是固定写法 */ 
             `
             <div>
                 <button @click='$emit("enlarge-text")'>扩大父组件中的字体</button>
             </div>`
         });
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {
                 pmsg: '这里是父组件中的内容',
                 fontSize: 10
             },
             methods: {
                 handle : function () {
                     this.fontSize += 3;
                 }
             }
         });
     </script>
 </body>
 ​

上述代码实现了点击按钮控制父组件中的文本变大的效果。仅仅是在子组件出发了一个事件，传递到了父组件。

2.2.3 子组件通过自定义事件向父组件传递信息

 <button v-on:click='$emit("enlarge-text",0.1)'>扩大字体</button>

2.2.4 父组件监听子组件的事件

 <menu-item v-on:enlarge-text='fontSize + $event'></menu-item>

上述两个步骤的综合示例代码如下：

 <body>
     <div id="app">
         <div :style='{fontSize:fontSize + "px"}'>{{pmsg}}</div>
         <!-- $event 固定写法 代表传递过来的真实的值 -->
         <menu-item @enlarge-text='handle($event)'></menu-item>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 子组件向父组件中传值-基本用法。props传值数据原则：单向数据流
         Vue.component('menu-item', {
             props: ['fontSize'],
             template: /*  $emit是固定写法 */ `
             <div>
                 <button @click='$emit("enlarge-text",5)'>扩大父组件中的字体</button>
             </div>`
         });
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {
                 pmsg: '这里是父组件中的内容',
                 fontSize: 10
             },
             methods: {
                 handle: function (value) {
                     this.fontSize += value;
                 }
             }
         });
     </script>
 </body>

2.3 非父子组件间传值

2.3.1 单独的事件中心管理组件间的通信

 var eventHub = new Vue()

2.3.2 监听事件与销毁事件

 eventHub.$on('add-todo',addTodo)
 eventHub.$off('add-todo')

2.3.3 触发事件

 eventHub.$emit('add-todo',id)//id 为可携带参数

上述三点的示例代码如下：

 <body>
     <div id="app">
         <div>父组件</div>
         <div>
             <button @click='handle'>销毁事件</button>
         </div>
         <test-tom></test-tom>
         <test-jerry></test-jerry>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 提供事件中心
         var hub = new Vue();
 ​
         // 兄弟组件之间的数据传递
 ​
         Vue.component('test-tom', {
             data: function () {
                 return {
                     num: 0
                 }
             },
             template: /*  $emit是固定写法 */ `
                 <div>
                     <div>TOM:{{num}}</div>
                     <div>
                         <button @click='handle'>点击jerry+2</button>
                     </div>
                 </div>
             `,
             methods: {
                 handle: function (value) {
                     // 触发兄弟组件的事件
                     hub.$emit('jerry-event', 2) //1是此时的val
                 }
             },
             /*  mounted函数被触发，表示模板已经准备就绪了，可以操作了*/
             mounted: function () {
                 // 事件监听
                 hub.$on('tom-event', (val) => {
                     this.num += val;
                 })
             }
         });
 ​
         Vue.component('test-jerry', {
             data: function () {
                 return {
                     num: 0
                 }
             },
             template: /* $emit是固定写法 */ `
                 <div>
                     <div>JERRY:{{num}}</div>
                     <div>
                         <button @click='handle'>点击tom+1</button>
                     </div>
                 </div>
             `,
             methods: {
                 handle: function (value) {
                     // 触发兄弟组件的事件
                     hub.$emit('tom-event', 1) //1是此时的val
                 }
             },
             mounted: function () {
                 // 事件监听
                 hub.$on('jerry-event', (val) => {
                     this.num += val;
                 })
             }
         });
 ​
         // 父组件如下：
         var vm = new Vue({
             el: '#app',
             data: {},
             methods: {
                 handle: function () {
                     hub.$off('tom-event')
                     hub.$off('jerry-event')
 ​
                 }
             }
         });
     </script>
 </body>

效果图如下：

兄弟组件间的数据传递.gif

3. 组件插槽

3.1 组件插槽的作用

  • 父组件向子组件传递内容

如下示例代码展示了组件插槽的使用：

 <body>
     <div id="app">
         <alter-box>有错误</alter-box>
         <alter-box>有一条bug</alter-box>
         <alter-box></alter-box>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 组件插槽
         Vue.component('alter-box', {
             template: /* <slot><slot> 标签为组件插槽，可以填写内容充当默认值*/
             `
             <div>
                 <strong>Error：</strong>   
 ​
                 <slot>默认内容<slot> 
             </div>
             `      
         })
         var vm = new Vue({
             el: '#app',
             data: {},
         })
     </script>
 </body>

浏览器显示结果为：

Error： 有错误

Error： 有一条bug

Error： 默认内容

3.2 具名插槽用法

示例代码如下：

 <body>
     <div id="app">
         <!-- 具名插槽的使用  -->
         <!-- 写法一：只能标记一个标签
             <base-loaout>
                 <p slot="header">标题信息</p>
                 <p>主要内容</p>
                 <p slot='footer'>底部信息</p>
             </base-loaout> 
         -->
         <!-- 写法二：使用template包裹多个标签 -->
         <base-layout>
             <template slot="header">
                 <p>标题信息1</p>
                 <p>标题信息2</p>
             </template>
             <p>主要内容1</p>
             <p>主要内容2</p>
             <template slot="footer">
                 <p>底部信息1</p>
                 <p>底部信息2</p>
             </template>
         </base-layout>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 具名组件插槽  -  定义具名插槽
         Vue.component('base-layout', {
             template: /* <slot><slot> 标签为组件插槽，可以填写内容充当默认值*/ `
             <div>
                 <header>
                     <slot name='header'></slot>    
                 </header>
                 <main>
                     <slot></slot>
                 </main>
                 <footer>
                     <slot name='footer'></slot>
                 </footer>
             </div>
             `
         })
         var vm = new Vue({
             el: '#app',
             data: {},
         })
     </script>
 </body>

3.3 作用域插槽

  • 应用场景：父组件对子组件的内容进行加工处理
 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>14 作用域插槽</title>
     <style>
         .current {
             color: red;
         }
     </style>
 </head>
 ​
 <body>
     <div id="app">
         <fruit-list v-bind:list='list'>
             <template slot-scope="slotProps">
                 <!-- 如果ID=2，字体颜色变红 -->
                 <span v-if='slotProps.info.id==2' class="current">{{slotProps.info.name}}</span>
                 <span v-else>{{slotProps.info.name}}</span>
             </template>
         </fruit-list>
     </div>
     <script src="js/vue.js"></script>
     <script>
         // 作用域插槽
         Vue.component('fruit-list', {
             props: ['list'],
             template: `
             <div>
                 <li :key='item.id' v-for='item in list' >
                     <slot :info='item'>{{item.name}}</slot>
                 </li>
             </div>
             `
         })
         var vm = new Vue({
             el: '#app',
             data: {
                 list: [{
                     id: 1,
                     name: '苹果'
                 }, {
                     id: 2,
                     name: '香蕉'
                 }, {
                     id: 3,
                     name: '梨'
                 }, ]
             },
         })
     </script>
 </body>
 ​
 </html>

效果图：

作用域插槽.png

avatar
文章
阅读
粉丝