<div id="app">
? <my-component v-model="msg"></my-component>
? msg: {{msg}}
? <my-counter v-model="num"></my-counter>
? num: {{num}}
</div>
Vue.component('my-component', {
? template: `<div>
? <input type="text" :value="currentValue" @input="handleInput"/>
? </div>`,
? computed:{
? currentValue:function () {
? ? return this.value
}
? },
? props: ['value'], //接收一個 value prop
? methods: {
? ? handleInput(event) {
? ? ? var value = event.target.value;
? ? ? this.$emit('input', value); //觸發(fā) input 事件，并傳入新值
? ? }
? }
});
Vue.component("my-counter", {
? template: `<div>
? <h1>{{value}}</h1>
? <button @click="plus">+</button>
? <button @click="minu">-</button>
? </div>`,
? props: {
? ? value: Number //接收一個 value prop
? },
? data: function() {
? ? return {
? ? ? val: this.value
? ? }
? },
? methods: {
? ? plus() {
? ? ? this.val = this.val + 1
? ? ? this.$emit('input', this.val) //觸發(fā) input 事件，并傳入新值
? ? },
? ? minu() {
? ? ? if(this.val>0){
? ? ? ? this.val = this.val-1
? ? ? ? this.$emit('input', this.val) //觸發(fā) input 事件，并傳入新值
? ? ? }
? ? }
? }
});
new Vue({
el: '#app',
? data: {
? msg: 'hello world',
? ? num: 0
? }
})
