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  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" />
  儿子跟我说话了{{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>