©2020-2024 ioDraw All rights reserved,
Privacy Policy
上次讲到了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
TodoListfrom '@/components/TodoList' export default { name: 'Menu', data () {
return { finishList: [] } }, components: { TodoList, }, // 接收方法 methods: {
handleFinish (event) { this.finishList.push(event); } } } </script>
父组件在HTML标签中讲子组件传递的值绑定到接收方法，再用接收方法处理并显示在父组件上。
父子组件传值的基本方法就是这些，更多传值方法还有兄弟组件传值，Slot，Vue等方法，在以后的文章里可以讲讲。