未加星标

Vue.js子组件向父组件通信

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏
一、场景描述:

曾经有个电商项目,其中有个“老带新”模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程。

当然,背景不重要了,关键是看实现的方式。

二、场景展示效果

(PS:展示效果请忽略美感)


Vue.js子组件向父组件通信
三、如何实现

注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓。

1、先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文件夹内,模拟父组件名称为Home.vue。


Vue.js子组件向父组件通信

2、效果图里面可以看出有两个三个元素:输入框、单选框、和新增按钮。

输入框使用v-model绑定值,方便后边获取到输入框数值; 单选框同样使用v-model绑定值,在新增时,将picked的值同步至父组件; 新增按钮,新增时将表单元素的组件值,操作传递事件;

子组件元素代码:

<template> <div class='add_item'> <label for="username">用户名: <input id='username' v-model='username' type="text" name='name'> </label> <span>username:{{username}}</span> <br /> <input type="radio" value='男' id='male' v-model='picked'> <label for="male">男</label> <input type="radio" value='女' id='female' v-model='picked'> <label for="female">女</label> <span>picked:{{picked}}</span> <br /> <button @click='add_user'>新增</button> </div> </template>复制代码

子组件数据、事件均放在script里面:

<script> export default { name: "itemadd", data() { return { username: "", picked: '男' } }, methods: { add_user() { let user={username:this.username,sex:this.picked} this.$emit('adduser',user) } } } </script>复制代码

顺便贴下子组件的样式

<style> .add_item { width: 100%; background-color: lightblue; padding-top: 10px; padding-bottom: 10px; } .add_item button { outline: none; border: none; width: 200px; height: 40px; color: white; background-color: green; border-radius: 10px; } </style>复制代码

3、父组件在使用子组件时,先获取到子组件,一并在代码里面展示组件事件

父组件的script内,获取子组件、初始列表数据、以及组件数据传递方法,代码有简单说明

<script> // 获取组件 import itemAdd from '@/components/itemAdd.vue' export default { name: 'home', data() { return { // 设置初始列表值,为展示效果,特意初始一条数据 userList: [{ username: "yang", sex: "男" }] } }, methods: { //调用子组件时添加数据到父组件数据 newuser(user) { this.userList.push(user) } }, //子组件调用 components: { itemAdd } } </script>复制代码

父组件通过v-on,添加事件方法

<template> <div class="home"> <!-- 子组件调用,并添加时间方法 --> <item-add @adduser='newuser'></item-add> <ul> <!-- 简单的样式展示 --> <li> <span>用户名</span> <span>性别</span> </li> <li v-for='user in userList' :key='user.id'> <span>{{user.username}}</span> <span>{{user.sex}}</span> </li> </ul> </div> </template>复制代码

按照流程,随便贴下父组件样式

<style scoped> li { list-style: none; } li:nth-child(even) { background-color: lightgrey; } </style>复制代码

四、总结:

子组件通过事件向父组件同部数据,上文展示的是通过$emit事件。其实还有v-model、Vuex等方式进行传递数据。

第一次写技术文章,语言表达上还有欠缺,请技术大神们多指点。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Vue.js子组件向父组件通信
本站链接:https://www.codesec.net/view/621100.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(47)