[Vue.js] 深入 -- 组件化开发

组件化开发思想

现实中的组件化思想体现

• 标准
• 分治
• 重用
• 组合

 

组件注册

全局组件注册语法

Vue.component(组件名称,{
	data:组件数据,
	template:组件模板内容
})

 

组件用法

<div id='app'>
    <button-counter></button-counter>
</div>

<button-counter></button-counter>可以重复使用

 

<script type="text/javascript">
    Vue.component('button-counter', {
        data: function(){
            return {
                count: 0
            }
        },
        template: '<button @click="handle">点击了{{count}}次</button>',
        methods: {
            handle: function(){
                this.count += 2;
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });

 

组件注册注意事项

• data 必须是一个函数

  • 分析函数与普通对象的对比

• 组件模块内容必须是单个跟元素

  • 分析演示实际的效果

• 组件模块内容可以是模板字符串

  • 模板字符串需要浏览器提供支持(ES6语法)

• 组件命名方式

  • 短横线方式

  Vue.component( 'my-component ', {/* ... */ })
  

  • 驼峰方式

  Vue.component('MyComponent' , {/* ... */ })
  

如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，但是在普通的标签模板中，必须使用短横线的方式使用组件

 

局部组件注册

var ComponentA= {/*... */ }
var componentB = {/*... */ }
var Componentc = {/*... */ }
new vue ( {
	el: #app'
	components: {
		'component-a' : ComponentA,
		'component-b' : ComponentB,
		'component-c' : ComponentC,
	}
})

局部组件只能在注册它的父组件中使用

<div id="app">
	<my-component></my-component>
</div>
<script>
	// 定义组件的模板
	var Child = {
	template: '<div>A custom component!</div>'
	}
	new Vue({
		//局部注册组件  
		components: {
			// <my-component> 将只在父模板可用  一定要在实例上注册了才能在html文件中使用
			'my-component': Child
		}
	})
 </script>

 

Vue调试工具用法

• 打开网址

• 克隆git clone https://github.com/vuejs/vue-devtools.git

• 安装 yarn install命令 和 yarn run build命令

• 打开扩展程序,点击开发者模式,加载已解压的扩展程序

• 找到vue-devtools/packages/shell-chrome/

 

组件间数据交互

父组件向子组件传值

• 组件内部通过props 接受传递过来得值

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

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

<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="title"></menu-item>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div>{{pmsg}}</div>
    <menu-item title='来自父组件的值'></menu-item>
    <menu-item :title='ptitle' content='hello'></menu-item>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
      父组件向子组件传值-基本使用
    */
    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>
</html>

 

• props属性名规则
  • props中使用驼峰形式
  • 模板中需要使用短横线的形式
  • 字符串形式的模板中没有这个限制

Vue.component ( 'menu-item' , {
	//在Javascript 中是驼峰式的
	props:[ 'menuTitle'],
	template: '<div>{{ menuTitle }}<ldiv>'
})
<!-在html中是短横线方式的-->
<menu-item menu-title="nihao"></menu-item>

 

• props属性值类型
  • 字符串 String
  • 数值 Number
  • 布尔值 Boolean
  • 数组 Array
  • 对象 Object

 

子组件向父组件传值

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

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

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

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

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

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

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

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

 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父组件用v-on 监听子组件的事件
		这里 enlarge-text  是从 $emit 中的第一个参数对应   handle 为对应的事件处理函数	
	-->	
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-携带参数
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
			###  1、子组件用$emit()触发事件
			### 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
  </script>

 

非父子组件间传值

• 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
  • 提供事件中心 var hub = new Vue()
• 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
• 接收数据方，通过mounted(){} 钩子中 触发hub.$on()方法名
• 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据

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

var eventHub = new Vue()

 

• 监听事件与销毁事件

//监听事件
eventHub.$on('add-todo',addTodo)
//销毁事件
eventHub.$off('add-todo')

 

• 触发事件

eventHub.$emit('add-todo',id)

<div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    //1、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)   触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3、接收数据方，通过mounted(){} 钩子中  触发hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

 

组件插槽

作用

• 父组件向子组件传递内容(模板内容)

• 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

 

基本用法

• 插槽位置

Vue.component('alert-box' , {
	template:
		<div class="demo-alert-box">
			<strong>Error!</strong>
    		<slot></slot>
		</div>
})

• 插槽内容

<alert-box>Something bad happened.</alert-box>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
        template: `
        <div>
          <strong>ERROR:</strong>
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>
</body>
</html>

 

具名插槽用法

废弃了原来的slot,换成现在v-slot:(可以简写成#)

若一个组件中有多个插槽，则可对这多个插槽进行命名，进行区分，也使得插槽更具语义化

//comp
<div>
	<p><slot></slot></p>
	<span><slot name="content"></slot></span>
</div>

//parent
//注意：父组件中使用的子组件的插槽，其作用域为父组件，故该title会渲染成父组件中的title的值
data() {
	return {
		title: '标题'
	};
}
<comp>
	//默认插槽用default做参数
	<template v-slot:default>具名插槽{{title}}</template>
	<template v-slot:content>内容信息</template>
</comp>

/* 渲染之后的为：
<div>
	<p>具名插槽标题</p>
	<span>内容信息</span>
</div>
*/

 

作用域插槽

废弃了slot-scope

当父组件中的使用到了子组件中的插槽，且需要显示子组件的某个变量的值，可通过slot的值进行上下文对象的获取

• 应用场景
  • 父组件对子组件的内容进行加工处理

//comp
<div>
	<slot :foo="foo"></slot>
</div>

//parent
<comp>
	<template v-slot:default="ctx">内容显示:子组件的foo数据为{{ctx.foo}}</template>
</comp>