vue入门：组件概述

组件这是我参与 8 月更文挑战的第 12 天，活动详情查看： 8月更文挑战html

是一个自定义元素或称为一个模块，包括所需的模板、逻辑和样式。在HTML模板中，组件以一个自定义标签的形式存在，起到占位符的功能。经过Vue.js的声明式渲染后，占位符将会被替换为实际的内容。咱们能够在一个经过 new Vue 建立的 Vue 根实例中，把这个组件做为自定义元素来使用。\vue

1.组件的生命周期

经过运行如下代码，能够清晰的看到组件的生命周期日志。建议执行，了解一下。web

<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 中的值提供一个带有验证需求的对象，而不是一个字符串数组。markdown

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

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> 元素将其动态组件包裹起来。ui

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>
复制代码