``` 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('点击了子组件内部的文字') } } }) ```
