how to understand that Vue applications are prop passing events down and up
official documents say so, and there are also examples of official code as follows:
counterexample 1
Vue.component("TodoItem", {
props: {
todo: {
type: Object,
required: true
}
},
template: "<input v-model="todo.text">"
})counterexample 2
Vue.component("TodoItem", {
props: {
todo: {
type: Object,
required: true
}
},
methods: {
removeTodo () {
var vm = this
vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
return todo.id !== vm.todo.id
})
}
},
template: `
<span>
{{ todo.text }}
<button @click="removeTodo">
X
</button>
</span>
`
})positive example 1
Vue.component("TodoItem", {
props: {
todo: {
type: Object,
required: true
}
},
template: `
<input
:value="todo.text"
@input="$emit("input", $event.target.value)"
>
`
})positive example 2
Vue.component("TodoItem", {
props: {
todo: {
type: Object,
required: true
}
},
template: `
<span>
{{ todo.text }}
<button @click="$emit("delete")">
X
</button>
</span>
`
})there are still many examples of this kind on the Internet, but most of them are code, so I don"t quite understand. So I"m here to ask you for advice.