Vue组件开发初探

# 全局注册
Vue.component('my-component',{
  template: '<span>Hello</span>'
})

# 局部注册
var child = {
  template: '<span>Hello</span>'
}
new Vue({
  // ···
  components:{
    my-component: child
  }
})

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component',{
  template: '<span>{{message}}</span>',
  data:function(){
    return {message:'hello'}
  }
})

Vue.component('my-component',{
  props: ['message']
  template: '<span>{{message}}</span>'
})

# 通过props传递消息给子组件
<my-component message="Hello"></my-component>

<div id="app">
  <input v-model="parentMsg"><br>
  <my-component v-bind:message="parentMsg">
</div>

# 使用v-on绑定自定义事件
Vue.component('my-component',{
  template: '<button v-on:click="increment">{{counter}}</button>',
  data: function(){
    return {counter: 0}
  },
  methods: {
    increment: function(){
      this.counter += 1;
      this.$emit(increment);
    }
  }
})
new Vue({
  el: '#app',
  data: {
    // ···
    total:0
  },
  methods: {
    // ···
    incrementTotal: function(){
      this.total += 1;

    }
  }
})

<div id="app">
  // ···
  <p>{{total}}</p>
  <my-component v-on:increment="incrementTotal"></my-component>
</div>

v-model="message"

v-bind:value="message" v-on:input="message = arguments[0]"

v-bind:value="message" v-on:input="message = $event.target.value"

# 使用自定义事件的表单输入控件
Vue.component('my-input',{
  template: '\
  <div>\
  <label>{{label}} :</label>\
  <input v-bind:value="value" v-on:input="onInput"></input>\
  </div>\
  '
  ,
  props:['value','label'],
  methods:{
    onInput:function(event){
      this.$emit('input',event.target.value);
      // this.$emit('input')
    }
  }

})

<div id="app">
  <p>{{message}}</p>
  <my-input label="Message" v-model="message"></my-input><br>
  <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->

</div>