Vue 综合- 组件 components

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

const compoent = {
  props: {
    // active: Boolean
    active: {
      type: Boolean, // 指定类型
      // default: true // 默认值，一般有默认值 required: true 则可以去掉。
      // default () { return true } 
      // required: true // 指定为必传字段
      validator (value) { // 自定义的检查传入的值是否符合条件
        return typeof value === 'Boolean'
      }
    }
  },
  template: `
    <div>
      <input type="text" v-model="text"></input>
      <span v-show="active" @click="handleClick">see me if active</span>
    </div>
  `,
  data () {
    return {
      text: 0
    }
  },
  methods: {
    handleClick () {
      this.$emit('touchClick')
    }
  }
}

new Vue({
  el: '#app',
  components: {
    compOne:compoent
  },
  template: `
    <div>
      <comp-one :active="true" @touchClick="handleClick"></comp-one>
      <comp-one :active="false"></comp-one>
    </div>
  `,
  methods: {
    handleClick () {
      alert('点击了子组件内部的文字')
    }
  }
})