上次讲到了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等方法,在以后的文章里可以讲讲。

技术
©2020 ioDraw All rights reserved
软件测试流程图vue/cli4的安装与使用Librosa音频处理(六)表面模糊滤镜中年失业破产后当雇佣兵、倒卖煎饼果子 游戏里的打工人也这么难?Vue新手:实现文件预览功能的前端企业网络拓扑图Softmax分类器及最优化@ControllerAdvice拦截异常返回数据【socket】案例分析