【Vue简易入门】父子组件传值
上次讲到了Vue的组件化概念,那这次来讲解下Vue里父子组件要怎么传值,也是学习Vue非常重要的一个知识点。这里我拿自己写的一个Todo List Demo来当做例子讲解。父组件向子组件传值父组件在子组件HTML标签中添加变量名和绑定data属性 ,子组件在props中添加变量名。在这个例子中,父组件为包含TodoList的页面,子组件为TodoList。<!-- 这是父组件 -->&
上次讲到了Vue的组件化概念,那这次来讲解下Vue里父子组件要怎么传值,也是学习Vue非常重要的一个知识点。这里我拿自己写的一个Todo List Demo来当做例子讲解。
父组件向子组件传值
父组件在子组件HTML标签中添加变量名和绑定data属性 ,子组件在props中添加变量名。在这个例子中,父组件为包含TodoList的页面,子组件为TodoList。
<!-- 这是父组件 -->
<template>
<div id="menu">
<div class="title">
<h1>Vue Todo List</h1>
<el-input v-model="inputValue" placeholder="请输入内容" style="width: 60%"></el-input>
<el-button @click=handleSubmit()>添加待办项目</el-button>
</div>
<!-- 在子组件标签中添加变量名和绑定data属性 -->
<TodoList title="待办清单" :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>
父组件在引用子组件TodoList的标签中添加了传递的addEvent变量,并绑定给data中的eventAdded属性。这里注意,另一个不需要绑定data属性的变量title,在变量名前不需加冒号,传递值为静态值。
<!-- 这是子组件 -->
<template>
<el-card>
<span>{{title}}</span>
<div v-for="(todo,index) in todoList" :key="index">
{{todo}}
<el-button>完成</el-button>
</div>
</el-card>
</template>
<script>
export default {
name: "TodoList",
data () {
return {
todoList: []
}
},
// 在props中添加传递的变量名
props: ['title', 'addEvent'],
watch : {
addEvent: {
immediate: true,
handler (val) {
if (val != null) {
this.todoList.push(val)
}
}
}
},
}
</script>
子组件在props里添加了title和addEvent,也就是父组件传递来的变量。这里注意,prop属性为单向数据传递,不能像data属性一样直接修改。
效果图:输入框中输入待办事项,点击“添加待办项目”,待办清单上便会显示
子组件向父组件传值
子组件在methods中写this.$emit(),父组件在子组件的HTML标签里绑定方法。
<!-- 这是子组件 -->
<template>
<el-card>
<span>待办清单</span>
<div v-for="(todo,index) in todoList" :key="index">
{{todo}}
<el-button @click="finish(index)">完成</el-button>
</div>
</el-card>
</template>
<script>
export default {
name: "TodoList",
data () {
return {
todoList: ["sleep", "eat", "work"]
}
},
// 在methods中写this.emit()传值给父组件
methods: {
finish : function(index) {
const eventFinished = this.todoList.splice(index, 1)[0]
this.$emit('finishEvent', eventFinished)
}
}
}
</script>
子组件用handleFinish方法传递了eventFinished,传递方法名称为finishEvent。
<!-- 这是父组件 -->
<template>
<div id="menu">
<!-- 讲子组件传递的值绑定到接收方法 -->
<TodoList @finishEvent="handleFinish"></TodoList>
<div v-for="(finish,index) in finishList" :key="index">
{{finish}}
</div>
</div>
</template>
<script>
import TodoList from '@/components/TodoList'
export default {
name: 'Menu',
data () {
return {
finishList: []
}
},
components: {
TodoList,
},
// 接收方法
methods: {
handleFinish (event) {
this.finishList.push(event);
}
}
}
</script>
父组件在HTML标签中讲子组件传递的值绑定到接收方法,再用接收方法处理并显示在父组件上。
父子组件传值的基本方法就是这些,更多传值方法还有兄弟组件传值,Slot,Vue等方法,在以后的文章里可以讲讲。
更多推荐
所有评论(0)