vue 一步一步学习 组件 (三)

vue 一步一步学习 组件 (三)

1 组件基础

我们可以理解成 ,组件就是可以重复利用的代码! 每个人根据自己的经验,总结了一段可以复用的代码,变成自定义组件. 在以后使用的过程中,我们直接引用组件即可,并且组件的引用每一次的引用都是一个新的组件各自独立.

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

当我们定义这个 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
  count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数 一个组件的 data 选项必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
  return {
    count: 0
  }
}

<template>
  <div>
    <div v-if="eat_Afternoon">该吃早饭了</div>
    <div v-if="eat_Afternoon">该吃中午饭了</div>
    <div v-if="eat_Evening"  >该吃晚饭了</div>
    <div>{{firstmethord()}}</div>
    <div>{{totalnum}}</div>
    <div><input type="text" v-model="inputValue"></input></div>
    <div>一会显示为: {{oldInputValue}}</div>

    <button v-on:click = "counter++" >单击增加</button>
    <button @click = "counter++" >单击增加</button>
    <div>{{counter}} 次数</div>
    <custom-button></custom-button>
  </div>
</template>

<script>
var hours = new Date().getHours()

/*自定义组件*/
const CustomButton = {
  template:'<button>自定义按钮</button>'
};
export default {
  data () {
    return {
      counter:0,
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14,
      inputValue: '',
      oldInputValue: ''
    }
  },
  methods: {
    firstmethord () {
      alert(1 + 1)
    }
  },
  computed: {
    totalnum () {
      return 3 * 3
    }
  },
  watch: {
    inputValue () {
      const newValue = this.inputValue
      setTimeout(() => { this.oldInputValue = newValue }, 5000)
    }
  },
  components:{
    CustomButton
  }
}
</script>

<style>

</style>

2 全局组件

1,创建全局组件目录

 src/componets/loading/

新增组件文件和引用配置文件:
loading.vue

<!-- 这里和普通组件的书写一样 -->
<template>
    <div class="loading">
       <button>全局自定义组件按钮</button>
    </div>
</template>

index.js 引用文件 如果多个自定义组件,直接在下面增加即可.

import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
    install: function(Vue){
        Vue.component('Loading',MyLoading)
    }
}
// 导出组件
export default Loading

全局引用: main.js 中增加:

// 引入自定义组件。index.js是组件的默认入口
import Loading from ‘./components/loading’
Vue.use(Loading);

整体目录结构:

局部使用自定义组件

 <custom-button></custom-button>

全局使用自定义组件

 <Loading></Loading>

<template>
  <div>
    <div v-if="eat_Afternoon">该吃早饭了</div>
    <div v-if="eat_Afternoon">该吃中午饭了</div>
    <div v-if="eat_Evening"  >该吃晚饭了</div>
    <div>{{firstmethord()}}</div>
    <div>{{totalnum}}</div>
    <div><input type="text" v-model="inputValue"></input></div>
    <div>一会显示为: {{oldInputValue}}</div>

    <button v-on:click = "counter++" >单击增加</button>
    <button @click = "counter++" >单击增加</button>
    <div>{{counter}} 次数</div>
    <custom-button></custom-button>

    <!-- 使用自定义组件 -->
    <Loading></Loading>

  </div>
</template>

<script>
var hours = new Date().getHours()

/*自定义组件*/
const CustomButton = {
  template:'<button>局部自定义组件按钮</button>'
};


export default {
  data () {
    return {
      counter:0,
      msg: 'hello vif',
      eat_Brackfast: hours < 12,
      eat_Afternoon: hours > 12 && hours < 14,
      eat_Evening: hours > 14,
      inputValue: '',
      oldInputValue: ''
    }
  },
  methods: {
    firstmethord () {
      alert(1 + 1)
    }
  },
  computed: {
    totalnum () {
      return 3 * 3
    }
  },
  watch: {
    inputValue () {
      const newValue = this.inputValue
      setTimeout(() => { this.oldInputValue = newValue }, 5000)
    }
  },
  components:{
    CustomButton
  }
}
</script>

<style>

</style>