vue組件總結（三）

時間  2019-12-08
標籤 vue 組件 總結 简体版
原文   原文鏈接

1、什麼是組件

　　組件（component）是Vue最強大的功能之一。組件能夠擴展HTML元素，封裝可重用的代碼，根據項目需求，抽象出一些組件，每一個組件裏包含了展示、功能和樣式。每一個頁面，根據本身的須要，使用不一樣的組件來拼接頁面。這種開發模式使得前端頁面易於擴展，且靈活性高，並且組件之間也實現瞭解耦。css

　　在Vue裏，一個組件本質上是一個擁有預約義選項的一個Vue實例。組件是一個自定義元素或稱爲一個模塊，包括所需的模板、邏輯和樣式。在HTML模板中，組件以一個自定義標籤的形式存在，起到佔位符的功能。經過Vue.js的聲明式渲染後，佔位符將會被替換爲實際的內容。html

 2、註冊組件

　　組件註冊包括全局註冊和局部註冊兩種前端

  • 調用Vue.component()註冊組件時，組件的註冊是全局的，這意味着該組件能夠在任意Vue示例下使用。（全局註冊的行爲必須在根Vue實例建立以前發生）
  • 若是不須要全局註冊，或者是讓組件使用在其它組件內，能夠用選項對象的components屬性實現局部註冊。（局部註冊組件在子組件中不可用）

　　【全局組件】要註冊一個全局組件，可使用Vue.component(tagName,option)，組件在註冊以後，即可以在父實例的模塊中以自定義元素<my-component></my-component>的形式使用，實例以下所示：vue

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>全局組件</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7     <style type="text/css">
 8         .container{
 9             width: 200px;
10             height: 300px;
11             border: 2px solid blue;
12         }
13         .container h2{
14             font-size: 30px;
15             font-style: normal;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="app">
21         <!--使用組件，全局組件能夠屢次使用-->
22         <my-component></my-component>
23     </div>
24     <div id="app2">
25         <!--使用組件，全局組件能夠屢次使用-->
26         <my-component></my-component>
27         <my-component2></my-component2>
28     </div>
29     <!--定義組件的視圖-->
30     <template id="demo3">
31         <h1 style="color:red">我是選項模板3</h1>
32     </template>
33     <!--定義組件的視圖-->
34     <script type="x-template" id="demo4">
35         <div class="container">
36             <h1 style="color:red">我是script標籤模板4</h1>
37             <h2>我是script標籤模板</h2>
38         </div>
39     </script>
40 
41     <script>
42         //全局註冊組件，全局組件能夠屢次使用
43         Vue.component("my-component",{
44             template:"#demo3"
45         });
46         //全局註冊組件，全局組件能夠屢次使用
47         Vue.component("my-component2",{
48             template:"#demo4"
49         });
50         var vm1 = new Vue({
51             el: "#app"
52         });
53         var vm2 = new Vue({
54             el: "#app2"
55         })
56     </script>
57 </body>
58 </html

運行效果以下所示：node

　　【局部註冊】經過使用組件實例選項component註冊，可使組件僅在另外一個實例或者組件的做用域中可用，實例以下所示：app

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>局部組件</title>
 6     <script src="../node_modules/vue/dist/vue.js"></script>
 7     <style type="text/css">
 8         .container{
 9             width: 200px;
10             height: 300px;
11             border: 2px solid blue;
12         }
13         .container h2{
14             font-size: 30px;
15             font-style: normal;
16         }
17     </style>
18 </head>
19 <body>
20 
21 <template id="demo1">
22     <h1 style="color:red">我是局部組件的佈局模板1</h1>
23 </template>
24 
25 <script type="x-template" id="demo2">
26     <div class="container">
27         <h1 style="color:red">我是script標籤構建的佈局模板</h1>
28         <h2>我是script標籤模板</h2>
29     </div>
30 
31 </script>
32 
33     <div id="app1">
34         <my-component1></my-component1>
35         <my-component2></my-component2>
36     </div>
37     <div id="app2">
38         <!--沒法在app2這裏使用，由於是子組件是在app2中局部註冊的-->
39         <my-component1></my-component1>
40         <my-component2></my-component2>
41     </div>
42     <script>
43         //子組件1
44         var child1 = {
45             template:"#demo1"
46         };
47         //子組件2
48         var child2 = {
49             template:"#demo2"
50         };
51         var vm1 = new Vue({
52             el: "#app1",
53             components:{
54                 //註冊子組件，<my-component1>和<my-component2>只能在app1使用
55                 "my-component1":child1,
56                 "my-component2":child2
57             }
58         });
59         var vm2 = new Vue({
60             el: "#app2"
61         })
62     </script>
63 </body>
64 </html>

 運行效果以下所示：ecmascript

3、組件之間傳值

3.1. 父組件向子組件傳值

  1. 子組件在props中建立一個屬性，用以接收父組件傳過來的值佈局

  2. 在父組件中註冊子組件；ui

  3. 在子組件標籤中添加子組件props中建立的屬性；this

  4. 把須要傳給子組件的值賦給該屬性

實例以下所示：

父組件：

 1 <template>
 2   <!-- 父組件 -->
 3   <div id="app">
 4     父組件:
 5     <input type="text" v-model="name">
 6     <!-- 引入子組件 -->
 7     <child :inputName="name"></child>
 8   </div>
 9 </template>
10 
11 <script type="text/ecmascript-6">
12 import child from './child'
13 export default {
14   components: {
15     child
16   },
17   data () {
18     return {
19       name: ''
20     }
21   }
22 }
23 </script>
24 
25 <style lang="stylus" rel="stylesheet/stylus" scoped>
26 
27 </style>

子組件：

 1 <template>
 2   <div>
 3     <!--子組件-->
 4     子組件:
 5     <span>{{inputName}}</span>
 6   </div>
 7 </template>
 8 
 9 <script type="text/ecmascript-6">
10 export default {
11   /* 接受父組件 */
12   props: {
13     inputName: String,
14     required: true
15   }
16 
17 }
18 </script>
19 
20 <style lang="stylus" rel="stylesheet/stylus" scoped>
21 
22 </style>

運行效果以下所示：

3.2.子組件向父組件傳值

  1.  子組件中須要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；

  2. 將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應事件的方法；

　　 3.在父組件中註冊子組件並在子組件標籤上綁定自定義事件的監聽。

實例以下所示：

子組件：

 1 <template>
 2   <div id="app">
 3     子組件:
 4     <span>{{childValue}}</span>
 5     <!-- 定義一個子組件傳值的方法 -->
 6     <input type="button" value="點擊觸發" @click="childClick">
 7   </div>
 8 </template>
 9 
10 <script type="text/ecmascript-6">
11 export default {
12   data () {
13     return {
14       childValue: '我是子組件的數據'
15     }
16   },
17   methods: {
18     childClick () {
19       console.log('childClick')
20       // childByValue是在父組件on監聽的方法
21       // 第二個參數this.childValue是須要傳的值
22       this.$emit('childByValue', this.childValue)
23     }
24   }
25 }
26 </script>
27 
28 <style lang="stylus" rel="stylesheet/stylus" scoped>
29 
30 </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>

運行效果以下所示：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程