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

在这篇文章之前小颖分享过小颖自己写的组件:Vue.js学习笔记（5）tabs组件和Tree升级版(实现省市多级联动)

先给大家看下小颖写了一个简单的组件示例:

组件:

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

在小颖写的组件中,小颖把创建组件时,组件的大部分属性都加了相应注释,大家看了要是还有什么疑问,可以留言哦.

下面看写调用组件后的效果图吧: