<template><div class=‘content‘ v-if=‘showFlag‘><input type="text" v-bind:style=‘{ width:compwidth+"px"}‘ v-model=‘compvalue‘ @keyup=‘myFun‘ v-el:getvalue><label class=‘example-label‘>观察参数"compvalue"的变化:</label>{{compvalue}}<button class=‘btn btn-danger‘ @click=‘compfun‘>确定</button></div></template><script>export default {  // 从父组件接收收据  props:{    compvalue:{      type:String,//类型(原生构造器：String, Number, Boolean, Function, Object, Array),如果绑定类型不对将抛出一条警告      required: true, //是否是必须项      twoWay:true,//指定这个 prop 为双向绑定,如果没有  ‘sync‘ 将抛出一条警告      default:‘‘,//默认值    },    compwidth:{      coerce: function (val) {        return val + ‘‘ // 将值转换为字符串      }    },    compfun:{      type:Function,      required:true    }  },  ready: function() {},  computed:{},//计算属性  methods: {//组件自身的方法    myFun:function(){      alert( this.$els.getvalue.value);    }  },  data() {//绑定数据    return {      showFlag:true,    }  }}</script>

<template><div class=‘example-content‘><compexample :compvalue.sync=‘values‘ :compfun=‘compFun‘></compexample></div></template><script>import compexample from ‘./componentExample.vue‘//引入组件export default {  components: {    compexample  },  ready: function() {  },  methods: {    compFun:function(){      alert(‘喵嘞个咪‘);    }  },  data() {    return {      values:‘hello‘    }  }}</script>