目錄

• 一、什麼是元件？
• 二、建立全域性元件
• 方式一
• 1、.extend
• 2、Vue.component
• 方式二
• 直接使用Vue.component
• 方式三
• 三、 建立區域性元件
• 四、元件中的data 和 methods
• 五、元件間的通訊方式
• props/$emit
• 通過事件形式
• 總結

一、什麼是元件？

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

二、建立全域性元件

方式一

1、Vue.extend

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

2、Vue.component

Vue.component(‘元件的名稱',創建出來的元件模板物件) 註冊組http://www.cppcns.com件

  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&gt;
<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>
<www.cppcns.comscript>
import Son from "@/components/Son";
export default {
  name: "Father",data(){
    return {
      title: '傳遞的是一個值'
    }
  },methods: {
    updateTitle(e){
      this.title = e
    }
  },components:{
    Son,}
}
</script>

總結

子元件通過events(事件)給父元件傳送訊息，實際上就是子元件把自己的資料傳送到父元件。

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