Vue组件应用

　　vue的组件是可复用的 vue 实例，且带有一个名字 。我们可以在一个通过 new vue 创建的 vue 根实例中，把这个组件作为自定义元素来使用。因为组件是可复用的 vue 实例，所以它们与 new vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

 

一　　创建组件

　　vue提供了三种不同的方式来定义组件，分别是：全局组件，私有组件，单文件组件。接下来就让我一一道来。

 

　　1，全局组件

　　注册全局组件非常简单，也是很常用的一种方式。

1 vue.component('mycom',{
2     template:'<div><p>我是一个全局<span>组件</span></p></div>'
3 });

　　vue.component()方法需要两个参数：

　　　　第一个，组件名称；

　　　　第二个，实例（初始化）对象，可以包含所有使用new方式创建vue实例时提供的所有属性，除了el。

　　注意：组件的实例对象必须提供一个template属性，用作该组件的html代码模板，且在该模板中有且只能有一个根元素。全局组件的注册必须在创建vue实例之前。

　　小技巧：由于在编写js时，一般没有html代码提示，创建组件模板代码会很不方便，所有可以在html文件中使用<template>元素创建模板，然后在组件的template属性中使用id选择器引用该模板。

　　注意：<template>元素必须在new vue实例接管的根元素外部。

1 <template id="tem">
2     <div>
3         <p>我是组件内的p</p>
4         <span>我是组件中的span</span>
5     </div>
6 </template>
7 <!-- 在html中 -->

1 vue.component('mycom',{
2     template:'#tem'
3 });
4 //在组件中

　　

　　2，私有组件

　　全局创建的组件在所有vue实例中均可以使用，有时候这并不符合我们的需求。你可以通过以下方式定义vue实例的私有组件，这些组件只能在该vue实例根元素内部使用。

1 var vm = new vue({
2     el:'#app',
3     components:{
4         mycom:{
5             template:'#tem'
6         }
7     }
8 });

　　通过vue实例的components属性可以定义私有组件，该属性绑定一个对象，对象的属性名是组件名，属性值是组件实例对象。

　　

　　3，单文件组件

　　vue的单文件组件是一个以.vue为后缀名的文件。由于html和javascrip不能识别.vue文件，所以不能直接使用这种方式的组件，必须配合webpack或vue-cli工具才能正确解析.vue文件。这里的重点是vue单文件组件，所以有兴趣的同学请移步。

1 <tempalte>
2     //html模板
3 </template>
4 <script>
5     //js代码
6 </script>
7 <style>
8     //css代码
9 </style>

　　.vue文件的名称就是组件的名称，其结构非常简单、清晰：

　　　　<template>标签是组件的html模板；

　　　　<script>标签是逻辑代码；

　　　　<style>标签中是样式代码。

 

二　　组件的使用

　　不管以哪种方式创建vue组件，我们最终的目的是在html页面中展示出来。本节将详细介绍vue组件使用方式。

 

　　1，组件标签

　　要把我们创建的vue组件添加到页面中去，只需要把组件名当做标签来使用即可。

1 vue.component('mycom',{
2     template:"#tem"
3 });
4 var vm = new vue({
5     el:"#app"
6 });
7 //js部分

1 <div id="app">
2     <my-com></my-com>
3 </div>
4 <!-- html部分 -->

　　小技巧：注册组件时，建议使用全小写形式命名，因为html标签要求使用小写字母。如果你一定要遵守小驼峰命名规则，那么你应该在使用组件时用“-”短横线把单词分隔开。

　　

　　2，组件复用

　　vue的组件可以重复使用。

1 <div id="app">
2     <my-com></my-com>
3     <my-com></my-com>
4     <my-com></my-com>
5 </div>

　　当然，全局组件可以在任何地方使用，而私有组件只能在实例接管元素内部使用。

　　组件不仅可以简单的重复使用，还可以嵌套。

 1 var vm = new vue({
 2     el:'#app',
 3     compontents:{
 4         mycom1:{
 5             template:'<div>组件一  <mycom2></mycom2></div>'
 6         },
 7         mycom2:{
 8             template:'<div>组件二</div>'
 9         }
10     }
11 });

　　

　　3，另一种使用方式

1 var mycom = {
2     tempalte:'<div id="app2">hello</div>'
3 };
4 var vm = new vue({
5     el:'#app',
6     render:function(createel){
7         return createel(mycom);
8     }
9 });

　　使用render方式渲染组件：给vue实例添加render属性，该属性值是一个接收一个方法作为参数的函数。参数用于创建vue组件，return该组件将替代vue实例接管的#app元素。最终的表现是：页面上将不再出现#app的div，取而代之的是#app2的div。

　　这种方式一般配合单文件组件使用，如果要渲染多个组件，只需要创建多个vue实例即可。

 

三　　数据传递（通信）

 

　　1，props传递数据(父组件 --> 子组件)

　　通过在子组件绑定props属性，实现父组件向子组件传递数据。props属性值是一个数组，数组元素被定义用来接收父组件传递来的数据，然后通过v-bind指令指定数组元素接收哪些数据。子组件通过访问props数组元素就可以访问到父组件传递过来的数据了，就如同访问data里面的值。

 

1 <div id="app">
2     <mycom :fromfathermsg="tosonmsg"></mycom>
3 </div>
4 <!-- html部分 -->

 1 vue.component({
 2     template:"<div>{{fromfathermsg}}</div>",
 3     props:["fromfathermsg"]
 4 });
 5 var vm = new vue({
 6     el:'#app',
 7     data:{
 8         tosonmsg:'这是给子组件的数据'
 9     }
10 });
11 //js部分

　　通过上面的例子，我们可以将这个过程简单的分为三步：

　　　　第一步，在子组件上添加一个数组属性props，在数组中定义用来接收数据的变量（以字符串形式存储）；

　　　　第二步，使用子组件时通过v-bind指令，绑定预先定义的接收变量和父组件将要传递过来的值；

　　　　第三步，在子组件中，如同访问data中的数据一样，访问props数组元素接收到的数据。

　　

　　2，$emit传递方法(父组件 --> 子组件)

　　父组件向子组件传递方法，是通过自定义事件来实现的。

　　监听（同时注册）自定义事件有两种方式：组件上使用v-bind、实例的$on()。这里我们将使用第一种方式来做演示。

　　子组件通过实例的$emit()方法触发自定义事件，这里的事件名将成为$emit()方法的第一个参数。

1 <div id="app">
2     <mycom @fromfatherfun="tosonfun"></mycom>
3 </div>
4 <!-- html部分 -->

 1 vue.component({
 2     template:"<div><button @click="myfun">点击执行来自父组件的方法</button></div>",
 3     methods:{
 4         myfun:function(){
 5             this.$emit('fromfatherfun');
 6         }
 7     }
 8 });
 9 var vm = new vue({
10     el:'#app',
11     methods:{
12         tosonfun(){
13         console.log( "这是给子组件的方法");
14     },
15 });
16 //js部分

　　注意：和传递数据一样，子组件不能直接使用父组件的方法。子组件需要通过实例的$emit()方法间接执行来自父组件的方法。

　　这一过程也可以分为三步：

　　　　第一步，使用子组件时，通过v-on指令自定义一个事件；

　　　　第二步，绑定自定义事件和父组件需要传递的方法（指定回调函数）；

　　　　第三步，通过子组件的$emit()方法（通过实参指定需要触发的自定义事件）触发父组件的方法执行；

　　

　　3，子组件抛出值（子组件 --> 父组件）

　　子组件在通过$emit()触发自定义事件时，可以同时利用方法的第二个参数，向外抛出一个值。回调函数（上面父组件传递下来的方法）需要定义一个形参来接收这个子组件抛出的值。

 1 //接上面的例子
 2 vue.component({
 3     template:"<div><button @click="myfun">点击执行来自父组件的方法</button></div>",
 4     data(){
 5         return {name:'ren'};
 6     },
 7     methods:{
 8         myfun:function(){
 9             this.$emit('fromfatherfun',this.name);
10         }
11     }
12 });
13 var vm = new vue({
14     el:'#app',
15     data:{
16         namefromson:null
17     }
18     methods:{
19         tosonfun(data){
20         this.namefromson = data;
21     },
22 });

　　子组件抛出一个值的原理和父组件给子组件传递方法原理是一样的，只不过是不同的用法而已。虽然有点绕，但有用哦。

　　

　　4，获取子组件的引用

　　在使用子组件时，通过绑定ref属性，父组件可以通过vue实例的$refs属性拿到子组件的引用，然后就可以直接访问子组件的属性或方法了。

1 <div id="app">
2 　<mycom ref="soncom"></mycom>
3   <button @click="printmsgfromson">点击打印子组件的信息</button>
4 </div>
5 <!-- html部分 -->

 1 vue.component('mycom',{
 2     data:function(){return {name:'ren'}}
 3 });
 4 
 5 var vm = new vue({
 6     el:'#app',
 7     methods:{
 8         printmsgfromson:function(){
 9             console.log(this.$refs.soncom.name);
10         }
11     }
12 });
13 //js部分

　　小技巧：ref属性不仅可以用在组件上，也可以用在其他标准html标签上，这样vue实例就可以获取到原生的dom对象了。

　　注意：即使子组件是vue实例的私有组件，实例也不能直接使用组件的相关数据，还是需要通过$refs等属性来间接访问。

 

　　5，兄弟组件间传值

 　　兄弟组件间实现通信也是采用自定义事件的形式。不过，这一般需要一个空的vue实例作为中介，配合使用$on()和$emit()实现兄弟组件间的传值。

 1 <div id="app">
 2     <com1></com1>
 3     <com2></com2>
 4 </div>
 5 <template id="com1">
 6   <div>
 7     <p>com1组件：{{name}}</p>
 8     <button @click="send">将数据发送给com2</button>
 9   </div>
10 </template>
11 <template id="com2">
12   <div>
13     <p>com2组件：{{name}}</p>
14   </div>
15 </template>
16 <!-- html部分 -->

 

 1 var event = new vue();
 2 var vm = new vue({
 3     el:'#app',
 4     components:{
 5         com1:{
 6             template:'#com1',
 7             data(){
 8                 return{name:'ren'};
 9             },
10             methods:{
11                 send(){
12                     event.$emit('sendmsg',this.name);
13                 }
14             }
15         },
16         com2:{
17             template:'#com2',
18             data(){
19                 return {name:null};
20             },
21             created(){//因为不知道什么时候会被触发，所以一般选择在生命周期钩子中监听
22                 event.$on('sendmsg',name => {this.name = name;})
23                 //这里需要使用箭头函数，使其内部的this指向com2
24             }
25         }
26     }
27 });
28 //js部分

 

 

四　　其他事项

 

　　1，单独的data

　　经过上面的学习，你可能已经发现了一个问题：组件中的data属性是一个函数返回的对象。

1 vue.component("mycom",{
2     template:"",
3     data(){
4         return { //some code };
5     }
6 });
7 //这是es6的写法，等同于data:function(){return {some code};}

　　由于data属性绑定的是一个对象，而对象是一个引用类型，为了保证为每个组件维护一份独立的数据，组件的data属性必须是一个函数。

　　

　　2，插槽<slot>

　　当你读到这里时，你可能会有一个疑问：既然我们可以用标签形式使用vue组件，那么是否可以在开始标签和结束标签之间填些内容呢？如果可以的话，该如何做呢？vue的答案是肯定的。

　　首先请看下面的例子：

1 <div id="app">
2     <com>我是插槽内容</com>
3 </div>
4 <!-- html部分 -->

1 vue.compenent('com',{
2     template:'<div><p>我是组件</p><slot>我是默认值<slot></div>'
3 });
4 var vm = new vue({
5     el:'#app'
6 });
7 //js部分

　　"我是插槽内容"将替换com组件中<slot>元素。

　　注意：如果在使用子组件时没有提供插槽值，那么<slot>元素中的默认值将会生效，前提是你已经定义了这些值。

　　上面的例子中，组件最终渲染的html结构如下：

1 <div>
2     <p>我是组件</p>
3     我是插槽内容
4 </div>

　　注意：插槽的内容不仅可以是文本内容，还可以是html代码，甚至另一个组件。

　　如果你需要在一个组件中定义多个插槽，那么你应该需要用到<slot>元素的name属性，来指定每个插槽应该拥有怎么样的模板。

 1 <div>
 2     <com>
 3         <template v-slot:"header">
 4             <!-- 单独的html模板 -->
 5         </template>
 6         <div><p>我是默认的模板</p></div>
 7         <template v-slot:"footer">
 8             <!-- 单独的html模板 -->
 9         </template>
10     </com>
11 </div>
12 <!-- html部分 -->

1 vue.component('com',{
2     tempalte:'<div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>'
3 });
4 var vm = new vue({
5     el:'#app'
6 });

　　具名的插槽需要在使用组件时，用<template>元素单独定义模板，并通过v-slot指令以参数的形式指定：“我是xxx插槽的模板”。

　　其他所有没有包裹在<template>元素内的模板，将自动归为匿名的<slot>元素下面。

 

　　

　　3，特殊的嵌套元素

　　有些 html 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。要怎样才能在这些元素中正确的渲染组件呢？幸好，vue提供了is特性：

1 <table>
2   <tr is="mycom"></tr>
3 </table>

　　注意：如果你使用字符串定义组件模板（例如：template: '...'）、或者单文件组件（.vue）、或者<script>标签（<script type="text/x-template">），那么你完全可以忽略掉这个限制。