vue组件总结（三）

一、什么是组件

　　组件（component）是Vue最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码，根据项目需求，抽象出一些组件，每个组件里包含了展现、功能和样式。每个页面，根据自己的需要，使用不同的组件来拼接页面。这种开发模式使得前端页面易于扩展，且灵活性高，而且组件之间也实现了解耦。

　　在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例。组件是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。通过Vue.js的声明式渲染后，占位符将会被替换为实际的内容。

二、注册组件

　　组件注册包括全局注册和局部注册两种

调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。（全局注册的行为必须在根Vue实例创建之前发生）
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。（局部注册组件在子组件中不可用）

　　【全局组件】要注册一个全局组件，可以使用Vue.component(tagName,option)，组件在注册之后，便可以在父实例的模块中以自定义元素<my-component></my-component>的形式使用，实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>全局组件</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

     <style type="text/css">

         .container{

             width: 200px;

             height: 300px;

             border: 2px solid blue;

         }

         .container h2{

             font-size: 30px;

             font-style: normal;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <!--使用组件，全局组件可以多次使用-->

         <my-component></my-component>

     </div>

     <div id="app2">

         <!--使用组件，全局组件可以多次使用-->

         <my-component></my-component>

         <my-component2></my-component2>

     </div>

     <!--定义组件的视图-->

     <template id="demo3">

         <h1 style="color:red">我是选项模板3</h1>

     </template>

     <!--定义组件的视图-->

     <script type="x-template" id="demo4">

         <div class="container">

             <h1 style="color:red">我是script标签模板4</h1>

             <h2>我是script标签模板</h2>

         </div>

     </script>

     <script>

         //全局注册组件，全局组件可以多次使用

         Vue.component("my-component",{

             template:"#demo3"

         });

         //全局注册组件，全局组件可以多次使用

         Vue.component("my-component2",{

             template:"#demo4"

         });

         var vm1 = new Vue({

             el: "#app"

         });

         var vm2 = new Vue({

             el: "#app2"

         })

     </script>

 </body>

 </html

运行效果如下所示：

　　【局部注册】通过使用组件实例选项component注册，可以使组件仅在另一个实例或者组件的作用域中可用，实例如下所示：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>局部组件</title>

     <script src="../node_modules/vue/dist/vue.js"></script>

     <style type="text/css">

         .container{

             width: 200px;

             height: 300px;

             border: 2px solid blue;

         }

         .container h2{

             font-size: 30px;

             font-style: normal;

         }

     </style>

 </head>

 <body>

 <template id="demo1">

     <h1 style="color:red">我是局部组件的布局模板1</h1>

 </template>

 <script type="x-template" id="demo2">

     <div class="container">

         <h1 style="color:red">我是script标签构建的布局模板</h1>

         <h2>我是script标签模板</h2>

     </div>

 </script>

     <div id="app1">

         <my-component1></my-component1>

         <my-component2></my-component2>

     </div>

     <div id="app2">

         <!--无法在app2这里使用，因为是子组件是在app2中局部注册的-->

         <my-component1></my-component1>

         <my-component2></my-component2>

     </div>

     <script>

         //子组件1

         var child1 = {

             template:"#demo1"

         };

         //子组件2

         var child2 = {

             template:"#demo2"

         };

         var vm1 = new Vue({

             el: "#app1",

             components:{

                 //注册子组件，<my-component1>和<my-component2>只能在app1使用

                 "my-component1":child1,

                 "my-component2":child2

             }

         });

         var vm2 = new Vue({

             el: "#app2"

         })

     </script>

 </body>

 </html>

运行效果如下所示：

三、组件之间传值

3.1. 父组件向子组件传值

子组件在props中创建一个属性，用以接收父组件传过来的值
在父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；
把需要传给子组件的值赋给该属性

实例如下所示：

父组件：

 <template>

   <!-- 父组件 -->

   <div id="app">

     父组件:

     <input type="text" v-model="name">

     <!-- 引入子组件 -->

     <child :inputName="name"></child>

   </div>

 </template>

 <script type="text/ecmascript-6">

 import child from './child'

 export default {

   components: {

     child

   },

   data () {

     return {

       name: ''

     }

   }

 }

 </script>

 <style lang="stylus" rel="stylesheet/stylus" scoped>

 </style>

子组件：

 <template>

   <div>

     <!--子组件-->

     子组件:

     <span>{{inputName}}</span>

   </div>

 </template>

 <script type="text/ecmascript-6">

 export default {

   /* 接受父组件 */

   props: {

     inputName: String,

     required: true

   }

 }

 </script>

 <style lang="stylus" rel="stylesheet/stylus" scoped>

 </style>

运行效果如下所示：

3.2.子组件向父组件传值

子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；

　　 3.在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

实例如下所示：

子组件：

 <template>

   <div id="app">

     子组件:

     <span>{{childValue}}</span>

     <!-- 定义一个子组件传值的方法 -->

     <input type="button" value="点击触发" @click="childClick">

   </div>

 </template>

 <script type="text/ecmascript-6">

 export default {

   data () {

     return {

       childValue: '我是子组件的数据'

     }

   },

   methods: {

     childClick () {

       console.log('childClick')

       // childByValue是在父组件on监听的方法

       // 第二个参数this.childValue是需要传的值

       this.$emit('childByValue', this.childValue)

     }

   }

 }

 </script>

 <style lang="stylus" rel="stylesheet/stylus" scoped>

 </style>

父组件：

<template>

  <div>

    父组件:

    <span>{{name}}</span>

    <br>

    <br>

    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->

    <child-component v-on:childByValue="childByValue"></child-component>

  </div>

</template>

<script type="text/ecmascript-6">

import childComponent from './childComponent'

export default {

  components: {

    childComponent

  },

  data () {

    return {

      name: ''

    }

  },

  methods: {

    childByValue: function (childValue) {

      // childValue就是子组件传过来的值

      this.name = childValue

      console.log(this.name)

    }

  }

}

</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>

运行效果如下所示：