I talked about it last time Vue The concept of componentization , Let's talk about it this time Vue How to transfer values to parent-child components , It's also learning Vue A very important knowledge point . Here I take one I wrote myself Todo List
Demo Let's take it as an example .
<> Pass value from parent component to child component
Parent component in child component HTML Add variable name and binding to the tag data attribute , Subcomponents in props
Add variable name to . In this case , The parent component is contained TodoList Page of , The subcomponents are TodoList.
<!-- This is the parent component --> <template> <div id="menu"> <div class="title"> <h1>Vue Todo List
</h1> <el-input v-model="inputValue" placeholder=" Please input the content " style="width: 60%"></el
-input> <el-button @click=handleSubmit()> Add to do items </el-button> </div> <!--
Add the variable name and binding to the child component label data attribute --> <TodoList title=" to-do list " :addEvent="eventAdded"></
TodoList> </div> </template> <script> import TodoList from
'@/components/TodoList' export default { name: 'Menu', data () { return {
inputValue: null, eventAdded: null, } }, components: { TodoList, }, methods: {
handleSubmit () { this.eventAdded = this.inputValue; } } } </script>
The parent component is referencing the child component TodoList The passed addEvent variable , And bind to data In eventAdded attribute . Notice here , The other does not require binding data Variable of property title, There is no need to precede the variable name with a colon , The pass value is
Static value .
<!-- This is a subcomponent --> <template> <el-card> <span>{{title}}</span> <div v-for=
"(todo,index) in todoList" :key="index"> {{todo}} <el-button> complete </el-button> </
div> </el-card> </template> <script> export default { name: "TodoList", data ()
{ return { todoList: [] } }, // stay props Add the name of the passed variable to the props: ['title', 'addEvent'],
watch: { addEvent: { immediate: true, handler (val) { if (val != null) { this.
todoList.push(val) } } } }, } </script>
Subcomponents in props Added in title and addEvent, That is, the variable passed by the parent component . Notice here ,prop Property is one-way data transfer , It can't be like that data Property is modified directly .
design sketch ： Enter the to-do items in the input box , click “ Add to do items ”, The to-do list is displayed
<> Pass value from child component to parent component
Subcomponents in methods Written in Chinese this.$emit(), The parent component is on the top of the child component HTML Binding method in tag .
<!-- This is the subcomponent --> <template> <el-card> <span> to-do list </span> <div v-for="(todo,index)
in todoList" :key="index"> {{todo}} <el-button @click="finish(index)"> complete </el-
button> </div> </el-card> </template> <script> export default { name: "TodoList"
, data () { return { todoList: ["sleep", "eat", "work"] } }, //
stay methods Written in Chinese this.emit() Pass value to parent component methods: { finish : function(index) { const
eventFinished= this.todoList.splice(index, 1)[0] this.$emit('finishEvent',
eventFinished) } } } </script>
For sub components handleFinish Method passed eventFinished, The delivery method name is finishEvent.
<!-- This is the parent component --> <template> <div id="menu"> <!-- The value passed by the subcomponent is bound to the receiving method --> <TodoList
@finishEvent="handleFinish"></TodoList> <div v-for="(finish,index) in
finishList" :key="index"> {{finish}} </div> </div> </template> <script> import
TodoListfrom '@/components/TodoList' export default { name: 'Menu', data () {
return { finishList: [] } }, components: { TodoList, }, // Receiving method methods: {
handleFinish (event) { this.finishList.push(event); } } } </script>
Parent component in HTML In the tag, the value passed by the subcomponent is bound to the receiving method , Then the receiving method is used to process and display on the parent component .
These are the basic methods for parent-child components to pass values , There are more ways to transfer values, and there are brother components to transfer values ,Slot,Vue And so on , We can talk about it in later articles .
Technology