vue入門：組件概述

組件這是我參與 8 月更文挑戰的第 12 天，活動詳情查看： 8月更文挑戰

是一個自定義元素或稱爲一個模塊，包括所需的模板、邏輯和樣式。在HTML模板中，組件以一個自定義標籤的形式存在，起到佔位符的功能。經過Vue.js的聲明式渲染後，佔位符將會被替換爲實際的內容。咱們能夠在一個經過 new Vue 建立的 Vue 根實例中，把這個組件做爲自定義元素來使用。\

1.組件的生命週期

經過運行如下代碼，能夠清晰的看到組件的生命週期日誌。建議執行，瞭解一下。

<template>
<div>
    <button v-on:click = "clickButton" name = "button" type = "button">按鈕</button>
    {{message}}
</div>
</template>

<script>
export default {
name: 'ComponentDemo',
data () {
  return {
    message:"改變以前"
}
},
methods: {
    clickButton(){
      this.message = "改變以後"
    }
},
//組件被建立以前
beforeCreate() {
    console.log("組件被建立以前")
},
created() {
    console.log("組件被建立以後")
},
beforeMount() {
    console.log("組件被渲染以前")
},
mounted() {
    console.log("組件被渲染以後")
},
beforeUpdate() {
    console.log("數據改變渲染以前")
},
updated() {
    console.log("數據改變渲染以後")
},
beforeDestroy() {
    console.log("銷燬以前")
},
destroyed() {
    console.log("銷燬以後")
}
}
</script>
複製代碼

2.簡單組件使用

組件能夠理解爲在一個頁面引用另外一個頁面，如下介紹簡單的組件使用方式。

組件
<template>
<div>
  我是組件啊
</div>
</template>

<script>
export default {
name: 'demoOne',
el: '#app',
data () {
  return {
}
}
}
</script>

<style scoped>
</style>

主頁
<template>
<div>
  我是主頁
  <demoOne/>
</div>
</template>

<script>
import demoOne from './demoOne.vue'

export default {
name: 'HelloWorld',
el: '#app',
data () {
  return {
}
},
components:{
  demoOne
}
}
</script>
複製代碼

4.父傳子

prop 是子組件用來接受父組件傳遞過來的數據的一個自定義屬性。 父組件的數據須要經過 props 把數據傳給子組件，子組件須要顯式地用 props 選項聲明 "prop"：

app.vue
<template>
  <div id="app">
    <parent/>
  </div>
</template>

<script>
import parent from './components/parent.vue'

export default {
  name: 'App',
  components:{
   parent
  }
}
</script>

<style>

</style>

parent.vue
<template>
<div>
  <p>我是父親</p>
  <son title="你好兒子" v-bind:thing = "thing"/>
</div>
</template>

<script>
import son from './son.vue'
export default {
name: 'parent',
data () {
  return {
      thing:"給你錢"
}
},
components:{
    son
}
}
</script>

<style>
</style>


son.vue
<template>
<div>
  我是兒子
  父親對我說{{title}}-{{thing}}-{{age}}
</div>
</template>

<script>
export default {
name: 'son',
data () {
  return {
}
},
props:{
    title:String,
    thing:String,
    age: {
      type: Number,
      default: 100
    }
}
}
</script>

<style scoped>
</style>
複製代碼

5.父傳子的值驗證

組件能夠爲 props 指定驗證要求。 爲了定製 prop 的驗證方式，你能夠爲 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。

props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會經過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
複製代碼

6.子傳父

與上文相反，子組件傳遞值到父組件。

app.vue
<template>
  <div id="app">
    <parent/>
  </div>
</template>

<script>
import parent from './components/parent.vue'

export default {
  name: 'App',
  components:{
   parent
  }
}
</script>

<style>

</style>


parent.vue
<template>
<div>
  <p>我是父親</p>
  <son v-on:getMessage = "getMsg" title="你好兒子"/>
  兒子跟我說話了{{msg}}
</div>
</template>

<script>
import son from './son.vue'
export default {
name: 'parent',
data () {
  return {
      msg:null
}
},
components:{
    son
},
methods: {
    getMsg(data){
        this.msg = data
    }
}
}
</script>

<style>
</style>


son.vue
<template>
<div>
  <button v-on:click = "sendMessage" name = 'button' type = "button">說話</button>
</div>
</template>

<script>
export default {
name: 'son',
data () {
  return {
    message:"你好父親"
}
},
methods: {
    sendMessage(event){
        this.$emit("getMessage",this.message);
    }
}
}
</script>

<style scoped>
</style>
複製代碼

7.插槽

插槽內能夠是任意內容。若是子組件沒有使用插槽，父組件若是須要往子組件中填充模板或者html, 是無法作到的。 下文介紹普通插槽和具名插槽的使用方法。

app.vue
<template>
  <div id="app">
    <HelloWorld>
          <!-- 依然在父組件中渲染 -->
          <!--普通插槽-->
          <!--   <p>我是父親你好插槽</p>    -->
          <!-- 具名插槽 -->
          <div slot ="demo">
             <p>aaaa</p>
             <p>bbbb</p>
             <p>cccc</p>
          </div>
          <p slot = "demo2">{{message}}</p>
          <!-- 接收兒子傳遞的 -->
          <p slot = "demo3" slot-scope = "props">{{props.text}}</p>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components:{
   HelloWorld
  },
  data () {
  return {
    message:"this is message"
 }
}
}
</script>

<style>

</style>

HelloWorld.vue
<template>
<div>
   <!--   父親的數據在兒子中顯示  -->
   <!--   <slot>普通插槽</slot>   -->
   <slot name= "demo">具名插槽1</slot>
   <slot name= "demo2">具名插槽2</slot>
   <!--   兒子傳遞給父親  -->
   <slot name= "demo3" v-bind:text = "message">兒到父</slot>
</div>
</template>

<script>
import demoOne from './demoOne.vue'

export default {
name: 'HelloWorld',
data () {
  return {
     message:"兒子到父親"
}
},
components:{
  demoOne
}
}
</script>
複製代碼

8.緩存keep-alive

從新建立動態組件的行爲一般是很是有用的，可是在這個案例中，咱們更但願那些標籤的組件實例可以被在它們第一次被建立的時候緩存下來。爲了解決這個問題，咱們能夠用一個 <keep-alive> 元素將其動態組件包裹起來。

app.vue
<template>
  <div id="app">
    <button v-on:click = "clickButton" name = "button" type = "button">切換</button>
    <!-- 能夠嘗試去掉keep-alive -->
    <keep-alive>
        <!-- 失活的組件將會被緩存！-->
        <component v-bind:is="stutas"></component>
    </keep-alive>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloWorld2 from './components/HelloWorld2.vue'

export default {
  name: 'App',
  components:{
   HelloWorld,
   HelloWorld2
  },
  data () {
  return {
    stutas:HelloWorld
 }
},
  methods: {
   clickButton(event){
     if(this.stutas ==HelloWorld){
         this.stutas = HelloWorld2
     }else{
         this.stutas = HelloWorld
     }
   }
},
}
</script>

<style>

</style>


HelloWorld.vue
<template>
<div>
      <button v-on:click = "clickButton1" name = "button" type = "button">1組件切換</button>
      {{content}}
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
  return {
    content:"組件1"
    }
},
methods:{
  clickButton1(event){
         this.content = "我剛剛點擊了"
  }
}
}
</script>

HelloWorld2.vue
<template>
<div>
   HelloWorld2
</div>
</template>

<script>

export default {
name: 'HelloWorld2',
data () {
  return {
}
}
}
</script>
複製代碼