<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue learning</title>
</head>
<body>
<div id="app">
<input v-model="count"/>
<ol>
<!--
現在我們爲每個 todo-item 提供 todo 對象
todo 對象是變量，即其內容可以是動態的。
我們也需要爲每個組件提供一個“key”，稍後再
作詳細解釋。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
@do-copy="doCopy"
@do-add="doAdd"
@do-sub="doSub"
></todo-item>
</ol>
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }} <button @click="copy(todo.text)">複製</button><button @click="add()">+</button><button @click="sub()">-</button></li>',
methods:{
copy: function(text){
console.log('do-copy',text);
this.$emit('do-copy', text)
},
add: function() {
console.log('do-add');
this.$emit('do-add');
},
sub: function() {
console.log('do-sub');
this.$emit('do-sub');
},
},
})
var app = new Vue({
el: '#app',
data: {
count: 0,
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '隨便其它什麼人喫的東西' }
]
},
methods:{
doCopy(text) {
console.log('groceryList', text)
this.groceryList.push({
id: this.groceryList.length,
text: text,
})
},
doAdd() {
console.log('doAdd', this.count);
this.count++;
},
doSub() {
console.log('doSub', this.count);
if (this.count > 0) {
this.count--;
}
},
}
})
</script>
</body>
</html>
學習Vue子組件操作父組件（emit）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
three | 光源掃描，波動牆效果
效果 光源掃描 波動牆 實現 1. 創建一個點光源，動態修改頂點座標 // 創建一個點光源 this._pointlight = new THREE.PointLight('red') th