一篇文章帶你瞭解Vue組件的創建和使用

Posted on by

一、什麼是組件？

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。

二、創建全局組件

方式一

1、Vue.extend

       var com1 = Vue.extend({
// 通過 template 屬性，指定瞭組件要展示的HTML結構
               template: '<h3>這是使用 Vue.extend 創建的組件</h3>'
            })

2、Vue.component

Vue.component(‘組件的名稱’, 創建出來的組件模板對象) 註冊組件

  Vue.component('myCom1', com1)

註意：如果使用Vue.Component 註冊全局組件的時候，組件的名稱使用瞭駝峰命名，則在引用組件的時候需要把大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 “–” 鏈接。如果不使用則直接拿名稱來使用即可。

在這裡插入圖片描述

方式二

直接使用Vue.component

            Vue.component('mycom2', {
                template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3>
<span>123</span></div>'
            })

示例：

在這裡插入圖片描述

方式三

1、被控制的 #app 外面,使用 template 元素,定義組件的HTML模板結構。

<template id="tmpl">
            <div>
                <h1>這是通過 template 元素,在外部定義的組件結構</h1>
                <h4>好用,不錯!</h4>
            </div>
        </template>

2、使用id註冊組件

   Vue.component('mycom3', {
        template: '#tmpl'
    })

三、 創建局部組件

局部組件的創建和全局組件的創建方法一樣。唯一區別的是，局部組件是在Vue實例中定義的。

在這裡插入圖片描述

四、組件中的data 和 methods

1、組件可以擁有自己的數據。

2、組件中的data 和實例中的data 有點不一樣，實例中的data 可以為一個對象。但是組件中的data必須是一個方法。

3、組件中的data除瞭是一個方法，還必須返回一個對象。

4、組件中的data 的使用方式和 實例中的data 使用方式一樣。（methods也一樣）

在這裡插入圖片描述

五、組件間的通信方式

在這裡插入圖片描述

props/$emit

父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現。

子組件：

<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" v-bind:key="index">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "users",
  props: {
    users: {  //父組件中子標簽自定義的名字
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>
 li{
   list-style-position: inside;
 }
</style>

父組件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Users v-bind:users="users"> </Users>
  </div>
</template>

<script>
import Users from "@/components/users";
export default {
  name: 'App',
  data(){
    return {
      users: ['西安郵電','西安石油','西北政法','西安工業','西安財經']
    }
  },
  components: {
    Users,
  }
}
</script>

通過事件形式

子組件：

<template>
  <header>
    <h1 @click="changeTitle">{{ title }}</h1>
  </header>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      title: 'Vue.js Demo'
    }
  },
  methods: {
    changeTitle(){
      this.$emit('titleChanged','西安郵電大學');
    }
  }
}
</script>

<style scoped>
 h1{
   background-color: greenyellow;
 }
</style>

父組件：

<template>
  <div id="app">
    <Son v-on:titleChanged="updateTitle"></Son>
    <h2>{{ title }}</h2>
  </div>
</template>
<script>
import Son from "@/components/Son";
export default {
  name: "Father",
  data(){
    return {
      title: '傳遞的是一個值'
    }
  },
  methods: {
    updateTitle(e){
      this.title = e
    }
  },
  components:{
    Son,
  }
}
</script>

總結

子組件通過events(事件)給父組件發送消息，實際上就是子組件把自己的數據發送到父組件。

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：