SOURCE

var bus = new Vue();
Vue.component('my-component', {
  template: '<div><div>{{message}}</div><div>{{arr[0]}}</div><div>{{arr[1]}}</div><div>姓名：{{object.name}}，性别：{{object.sex}}</div><button @click="childrenClick">click</button></div>',
  props: ['messages', 'arr', 'object'],
  data: function () {
    return { message: this.messages+'--我需要在父组件传递的数据上做处理后展示' }
  },
  methods: {
    childrenClick: function(arg){
      alert("arg:"+arg);
      alert('children的click方法被调用了！');
      this.$emit('children')
    }
  },
  mounted: function(){
    bus.$on('changed', this.childrenClick)
  }
})
Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      var formattedValue = value.trim().slice(0, value.indexOf('.') + 3)
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      this.$emit('input', Number(formattedValue))
			bus.$emit('changed', Number(formattedValue))
    }
  }
})
Vue.component('my-validate', {
  template: '<div> \
  						<div>{{propA}}</div>\
							<div>{{propB}}</div>\
							<div>{{propC}}</div>\
							<div>{{propD}}</div>\
							<div>{{propE.message}}</div>\
							<div>{{propF}}</div>\
  					</div>',
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})
var vm = new Vue({
  el: '#app',
  data: function(){
    return {
      arr: ['数组元素1', '数组元素2'],
      object: {
        name: '王宇',
        sex: '男'
      },
      price: ''
    }
  },
  methods: {
    parentClick: function(){
      alert('parent的click方法被调用了！');
    },
    doTheThing: function(){
  		alert('native');
      console.log(this.$refs.currency)
    }
  }
})

<div id="app">
  <my-component messages="Vue的父组件通过子组件的props属性传递参数" @children="parentClick" :arr="arr" :object="object" @click.native="doTheThing"></my-component>
  <my-validate :prop-A="1" :prop-B="3" prop-C="C" :prop-F="11"></my-validate>
  <currency-input ref='currency' v-model="price"></currency-input>
</div>

#app{
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  text-align: center;
}