<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-model input输入双向绑定数据 当用户输入数据，input发生改变时，输入的内容会自动保存到inputValue中 --> <input type="text" v-model="inputValue"> <button @click="handleClick">提交</button> <ul> <!-- 父向子组键传值 v-bind: 指令 子组件使用props接收 父组件通过监听子组件自定义事件(delete)，调用绑定函数 --> <todo-item v-for="(item, index) in list" :content="item" :index="index" @delete="handleItemDelete" ></todo-item> </ul> </div> </body> <script type="text/javascript"> //局部组件/子组件 let TodoItem = { // props可以接收父组件传递过来的值 props: ['content', 'index'], template: `<li @click='handleItemClick'>{{this.content}}</li>`, methods: { handleItemClick () { //子组件使用$emit(constomEvent[,data])向父组件传值，data表示传送的数据 this.$emit('delete', this.index) } } } let app = new Vue({ el: '#app', data: { list: [], inputValue: '' }, //局部组件注册 components: { TodoItem }, methods: { handleClick () { this.list.push(this.inputValue) this.inputValue = '' }, // 子组件向父组件传值进行操作 handleItemDelete (index) { this.list.splice(index, 1) } } }) </script> </html>
vue_父子组件互相传值
猜你喜欢
转载自www.cnblogs.com/JunLan/p/12408556.html
今日推荐
周排行