Vue 组件化

组件概述

概述

组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代

组件注册

全局注册

Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象，全局组件注册后，任何vue实例都可以用

组件基础使用

<div id="example">
	<!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  
  <my-component></my-component>
</div>
<script>
//   注册组件 
// 1、 my-component 就是组件中自定义的标签名
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
  el: '#example'
})
</script>

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象 、组件模板必须是单个根元素、组件模板的内容可以是模板字符串

<div id="app">
<!-- 4、组件可以重复使用多次 因为data中返回的是一个对象所以每个组件中的数据是私有的,即每个实例可以维护一份被返回对象的独立的拷贝  --> 
	<button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
  <!-- 8、必须使用短横线的方式使用组件 -->
  <hello-world></hello-world>
</div>

<script type="text/javascript">
	//5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
  // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
  Vue.component('HelloWorld', {
    data: function(){
      return {
        msg: 'HelloWorld'
      }
    },
    template: '<div>{{msg}}</div>'
  });
    
    
	Vue.component('button-counter', {
    // 1、组件参数的data值必须是函数 
    // 同时这个函数要求返回一个对象  
    data: function(){
      return {
        count: 0
      }
    },
    //  2、组件模板必须是单个根元素
    //  3、组件模板的内容可以是模板字符串  
    template: `
			<div>
				<button @click="handle">点击了{{count}}次</button>
        <button>测试123</button>
				#  6 在字符串模板中可以使用驼峰的方式使用组件	
		   	<HelloWorld></HelloWorld>
      </div>
      `,
    methods: {
      handle: function(){
        this.count += 2;
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data: {   }
  });
  </script>

局部注册

只能在当前注册它的vue实例中使用

<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组件之间传值

父组件向子组件传值

• 父组件发送的形式是以属性的形式绑定值到子组件身上。
• 然后子组件用属性props接收
• 在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制

<div id="app">
  <div>{{pmsg}}</div>
  <!--1、menu-item  在 APP中嵌套着 故 menu-item   为  子组件      -->
  <!-- 给子组件传入一个静态的值 -->
  <menu-item title='来自父组件的值'></menu-item>
  <!-- 2、 需要动态的数据的时候 需要属性绑定的形式设置 此时 ptitle  来自父组件data 中的数据 . 
传的值可以是数字、对象、数组等等
-->
  <menu-item :title='ptitle' content='hello'></menu-item>
</div>

<script type="text/javascript">
  Vue.component('menu-item', {
    // 3、 子组件用属性props接收父组件传递过来的数据  
    props: ['title', 'content'],
    data: function() {
      return {
        msg: '子组件本身的数据'
      }
    },
    template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
  });
  var vm = new Vue({
    el: '#app',
    data: {
      pmsg: '父组件中内容',
      ptitle: '动态绑定属性'
    }
  });
</script>

子组件向父组件传值

• 子组件用$emit()触发事件
• $emit() 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
• 父组件用v-on 监听子组件的事件

<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()方法名销毁之后无法进行传递数据

<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>

组件插槽

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

匿名插槽

<div id="app">
  <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
  <alert-box>有bug发生</alert-box>
  <alert-box>有一个警告</alert-box>
  <alert-box></alert-box>
</div>

<script type="text/javascript">
  /*
      组件插槽：父组件向子组件传递内容
    */
  Vue.component('alert-box', {
    template: `
      <div>
      <strong>ERROR:</strong>
      # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
      # 插槽内可以包含任何模板代码，包括 HTML
      <slot>默认内容</slot>
        </div>
      `
  });
  var vm = new Vue({
    el: '#app',
    data: {

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

具名插槽

• 具有名字的插槽 ，可以在子元素中的指定位置插入元素
• 使用 <slot> 中的 "name" 属性绑定元素

<div id="app">
    <sub-com>
    	<template v-slot:header>
			<div>头部</div>
			<div>头部</div>
        </template>
        <template v-slot:main>
			<div>主体</div>
			<div>主体</div>
        </template>
        <template #footer>
			<div>脚部</div>
			<div>脚部</div>
        </template>
    </sub-com>
</div>

<template id="subcom">
	<div>
        <slot name="header"></slot>
        <slot name="main"></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
    let vm = new Vue({
        el:"#app",
        components:{
            "sub-com":{
                template:"#subcom"
            }
        }
    })
</script>

其中的 v-slot: 可以简写成 #

作用域插槽

• 父组件对子组件加工处理
• 既可以复用子组件的 slot，又可以使 slot 内容不一致

<div id="app">
    <sub-com> 
    	<template v-slot:default="dataObj">
			<div>{{dataObj.info}}</div>
        </template>
    </sub-com>
    
    <!--与上面的方式达到的效果相同  v-slot: 简写为 #-->
    <sub-com> 
    	<template #default="dataObj">
			<div>{{dataObj.info}}</div>
        </template>
    </sub-com>
</div>

<template id="subcom">
	<slot v-bind:info="msg"></slot>
</template>

<script>
    let vm = new Vue({
        el:"#app",
        components:{
            "sub-com":{
                template:"#subcom",
                data:()=>({
                    msg:"子组建的数据"
                })
            }
        }
    })
</script>

子组件通过 v-bind=info 来设置要暴露的子组件的数据，通过 v-slot="dataObj" 来获取子组件的数据，从而在填充它的组件中使用。

动态组件

<div id="app">
    <son1 v-if="isSon1"></son1>
    <son2 v-else></son2>

    <son1 v-show="isSon1"></son1>
    <son2 v-show="!isSon1"></son2>

    <keep-alive>
        <component :is="sonComId"></component>
    </keep-alive> 
</div>

<template id="son1">
<div>子组件1</div>
</template>

<template id="son2">
<div><input type="checkbox"> 子组件2</div>
</template>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isSon1: true,
            sonComId:"son1"
        },
        components: {
            "son1": {
                template: "#son1"
            },
            "son2": {
                template: "#son2"
            }
        }
    })
</script>

使用 v-if | v-else-if | v-else 来切换组件，组建的状态不会被保存下来，使用 v-show 可以保存下来。还可以使用keep-alive 标签和 componen 标签一起使用，来达到保存状态的目的。

<component :is="sonComId"></component>

其中通过 :is="sonComId" 来判断要渲染的组件，sonComId 是在 data 中定义的组件名称字符串。通过修改 sonComId 就可以动态的切换组件