This time I will show you how to use the parent-child component in Vue to communicate with the todolist component. What are the precautions for using the parent-child component in Vue to communicate with the todolist component. The following is a practical case, let's take a look.
1. Todolist function development
##
<p id="root"> <p> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </p> <ul> <li v-for="(item, index ) of list" :key="index">{{item}} </li> </ul> </p> <script> new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; } } }) </script>
2. Todolist component split
Define components, communicate between components
1. Global components
<p id="root"> <p> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </p> <ul> <todo-item></todo-item> </ul> </p> <script> Vue.component('todo-item',{ template:'<li>item</li>' }) ...
2. Local components
need to be registered, otherwise an error will be reported:vue.js:597 [Vue warn]: Unknown custom element:The parent component passes values to the child components in the form of attributes.- did you register the component correctly? For recursive components, make sure to provide the "name" option. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.js"></script> </head> <body> <p id="root"> <p> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </p> <ul> <todo-item></todo-item> </ul> </p> <script> //全局组件 // Vue.component('todo-item',{ // template:'<li>item</li>' // }) var TodoItem={ template:'<li>item</li>' } new Vue({ el:"#root", components:{ 'todo-item':TodoItem }, data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; } } }) </script> </body> </html>Copy after login
<p id="root"> <p> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </p> <ul> <todo-item v-for="(item ,index) of list" :key="index" :content="item" ></todo-item> </ul> </p> <script> Vue.component('todo-item',{ props: ['content'], //接收从外部传递进来的content属性 template:'<li>{{content}}</li>' }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; } } }) </script>
3. The relationship between components and instances
new Vue() instance
Vue .component is a componentEach Vue component is an instance of Vue. Any vue project is composed of thousands of vue instances. Each vue instance is a component, and each component is also an instance of vue.4. Implement the delete function of todolist
The child component notifies the parent component through the publish-subscribe mode.<p id="root"> <p> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </p> <ul> <todo-item v-for="(item ,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete' ></todo-item> </ul> </p> <script> Vue.component('todo-item',{ props: ['content','index'], //接收从外部传递进来的content属性 template:'<li @click="handleDeleteItem">{{content}}</li>', methods:{ handleDeleteItem:function(){ this.$emit('delete',this.index); } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; }, handleDelete:function(index){ this.list.splice(index,1);
How to use JS to make a tic-tac-toe game
The above is the detailed content of How to use the parent-child component in Vue to communicate with the todolist component. For more information, please follow other related articles on the PHP Chinese website!