Vue.js学习笔记（7）组件详解

<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>