【Vue】props + $emit 实现父子组件传值【实战篇】

最新推荐文章于 2023-08-04 07:45:00 发布
最新推荐文章于 2023-08-04 07:45:00 发布
阅读量688 收藏 9
点赞数
分类专栏： Vue.js 文章标签： vue props emit 父子组件间传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43352901/article/details/109288481
版权

props + $emit 实现父子组件传值

例子要求：

在这里插入图片描述
通过例子要求我们可以分析出： 三个组件

  • 主组件（父组件–展示个人信息列表~）
  • 新增子组件（子组件–填写数据、新增用户）
  • 详情子组件（子组件–查看点击的当前用户的个人信息详情）

既然有父子组件，那么他们其中必然需要联系，这时候 props、$emit 就派上用场了！！！

在这之前：如果你还不了解props、$emit、$parent，你可以先看看下面的博客，理解后再看本篇文章：

了解何为 props ？该如何使用呢 ？

何为 $emit ? 如何使用 ？

何为 $parent ？它的使用场景是什么？

component 动态组件 和 is属性

实现效果（这使用了 boostrap 简单布局）
首页

在这里插入图片描述

点击新增用户

默认页面
在这里插入图片描述
可以在表单输入数据~~
在这里插入图片描述
当点击新增时，则会新增用户，返回主页面，这时候，主页面会展示刚刚新增的用户~~
在这里插入图片描述
当点击取消不会新增用户~~，还是原始页面（1条数据）

点击详情

可以查看到刚刚新增的用户信息~

在这里插入图片描述
点击返回，则返回主页面~~
在这里插入图片描述

点击删除

会删除选中的项~比如删除第一项–蔡徐坤，则白胡子为第一项了
在这里插入图片描述

文件目录如下

在这里插入图片描述

代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息展示2</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/js/bootstrap.min.js">
    <script src="./vue.js"></script>
    <style>
      .father {
   
          width: 375px;
          height: 667px;
          border: 1px solid palevioletred;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          display: flex;
          flex-direction: column;
      }
      .father-page {
   
          margin: 10px 10px;
      }
      .father .father-form {
   
          margin: 10px 0;
          display: flex;
      }
      .father .father-form table {
   
          text-align: center;
      }
      .child-addPage {
   
          margin: 10px 10px;
      }
      .item-flex {
    /* 水平居中 */
          display: flex; 
          justify-content: center;
      }
      .child-detailPage{
   
          margin: 10px 10px;
      }
      .text-center{
   
          text-align: center;
      }
    </style>
</head>

<body>
    <!--父组件-->
    <div id="app" class="father">
        <div class="father-page" v-if="showMain">
            <div class="father-add">
                <button type="button" class="btn btn-primary" @click="showAddPage">新增用户</button>
            </div>
            <div class
最低0.47元/天 解锁文章
Milk595
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
$emit和$on可以实现组件之间的传值，我们知道父组件传值给子组件使用props，但是不允许子组件传值给父组件，这时候使用这个就可以实现了。 注意：$emit和$on的事件必须在一个公共的实例上，才能够触发。 例子：我要实现某个系统的通讯录功能，在web端我们可以使用基于jQuery的ztree插件实现目录的展现，但是在vuejs框架里面，tree目录需要通过递归组件实现。 1、现在有两个组件，父组件contact_index.vue，子组件cust_tree.vue 2、点击父组件里面的选择银行，跳出银行树目录结构（使用vuejs的递归组件实现）,这里面需要做两种传值： （1）父组件
vue中父子组件之间的传递 props和$emit
abcdefg182的博客
07-28 469
props父传子:父组件的数据传递给子组件 $emit子传父:子组件的数据传递给父组件 props 父传子 : <!-- 父 --> <div id="app"> <!-- 子 父 --> <cpn :cmovies="movies" :cmessage="message" :cinfo="info"></cpn> </div> <!-- 子 --&.
Vue学习笔记 - 父子组件传值（props与$emit）
HVENLY的博客
06-08 586
目录一、定义二、父组件向子组件传值三、子组件向父组件传值四、总结 一、定义 何为父子组件？ 二、父组件向子组件传值 通过props 三、子组件向父组件传值 四、总结
vue中父子组件传值Prop&$emit
weixin_44759289的博客
08-09 337
1、父组件向子组件传值 //父组件.vue <template> <div> <Child name="张三" sex="女" :age="18" /> </div> </template> <script> import Child from './components/Child' export default{ name:"Parent", conponents:{Child} } </script&g
props和$emit的父子传值
plan_jok的博客
01-14 91
$emit props
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
vue之父子组件间通信实例讲解(props、$ref、$emit)
08-27
Vue 之父子组件间通信实例讲解（props、$ref、$emit） 在 Vue 中，组件间的通信是非常重要的知识点之一。本文将通过 props、$ref 和 $emit 三个知识点，来讲解如何实现父子组件间的通信。 首先，让我们来建立两个...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
Vue2基础-Vue2.x 父子组件数据通信 Prop 和 Event
龙衣
12-05 732
组件参数传递 prop 监听子组件事件
Vue 父子组件传参 prop/emit
小楼一夜听春雨，深巷明朝卖杏花
07-27 410
当你在子组件定义了父亲组件传给子组件的props，定义之后也不需要去子组件data里面去声明了，可以直接使用，将这个值放到template里面的。父组件要往子组件里面传数据， 因为有时候子组件的页面展示内容是由你父组件决定的。App.vue它是一个父组件，然后Test和HelloWord，这两个其实就是子组件。学习了组件用法，就像一种嵌套引用关系，在这个关系中，经常会涉及相互传数据的需求，即父组件传子组件，子组件传父组件。组件之间的数据是要相互传递的，这里的组件对于整个页面来说，子组件和父组件。
09.组件间数据交互-父子组件间的通信
wl516372370的博客
06-05 196
父子组件的通信一、父组件向子组件传值 一、父组件向子组件传值 1.子组件内部通过“props”接收父组件传递过来的值 下面展示一个 全局定义的子组件。 <script src="../node_modules/vue/dist/vue.js"></script> <script> Vue.component('menu-item',{ //这里传递了两个属性 accept、content props:['accept','content']
vue的父组件和子组件通过prop和$emit进行数据流动
柠檬精哒博客
08-19 806
一、什么是VUE，它的优势是什么？ 概念：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。 优势：与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支...
Vue — 子组件改变父组件属性值的几种方法
weixin_38384296的博客
03-20 1704
1，props配合$emit改变父组件传入的值 //父组件 <my-input :wranning.sync="wranning" /> //组件 $emit('update:wranning',val) 在父组件传入值时，需要有xxx.sync修饰符； 子组件可以在$emit('update:xxxx',val)，派发事件修改传入的值； 2，v-model配合inpu...
父子组件使用 props和$emit传值总结（非常全面）
monika_beiluqi的博客
09-16 994
父子组件使用 props和$emit传值 总结: 一: 父传子。注意点有3个。 第1: 在js中用驼峰式命名，在html中替换成短横线 分割式命名 在html中 <child my-message="hello"/> 在js中: 子组件中 props:['myMessage'] 第2: props规范写法 如果 有默认值，而且是 数组或者对象类型，props需要用规范写法:既必须用对象形式且必须 用函数返回。 默认值如果不是数组或者对象，则可以直接用数组形式写。 例: props:{
vue框架中父组件与子组件之间的通信之props+$emit()方法
kilig_CSM的博客
08-12 277
其中BottomRightCorner标签里的:BottomRightCorner_flag='BottomRightCorner_flag'代表向子组件传递一个叫BottomRightCorner_flag的参数,参数内容为父组件data里的BottomRightCorner_flag.该样例可用于网页右下角回弹按钮在将网页下拉到一定程度时才显现,具体实现可用在下拉到一定程度时js控制父组件data的中的BottomRightCorner_flag来控制传给子组件的数据,再来实现回弹按钮的隐藏和显现...
Vue组件通信方式 props/$emit
NolanKy 的 技术博客
11-07 732
自定义事件本质是由子组件向父组件传递信息 <template> <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']"> <i :class="['el-alert__icon',changeIcon]"></i> <div class="el-alert__content"> <slo
$emit的用法
热门推荐
上善若水
06-22 3万+
这篇文章主要介绍了vue中 $emit的用法，通过实例代码给大家介绍了子组件和父组件的相关知识，需要的朋友参考下吧
组件传递数据——$emit（子传父）
最新发布
weixin_46372993的博客
08-04 2306
emit的用法提示：以下是本篇文章正文内容，下面案例可供参考（1）ParentComponent组件data() {（2）ChildComponent组件（3）App.vueemit用于触发自定义事件。通过$emit方法可以在组件内部触发一个自定义事件，并传递数据给父组件或其他监听该事件的组件。使用emit的语法为：this.$emit(eventName, data)，其中eventName为自定义事件的名称，data为要传递的数据（可选）。
vue实现父子组件传值的代码
04-07
可以使用props和emit来实现父子组件之间的数据传递，具体代码实现可以参考以下示例： // 子组件 <template> <div> <p>子组件接收到的父组件的数据为：{{dataFromParent}}</p> <button @click="sendDataToParent">向父组件发送数据</button> </div> </template> <script> export default { props: { dataFromParent: { type: String, default: '' } }, methods: { sendDataToParent() { this.$emit('send-data-to-parent', '子组件发送的数据') } } } </script> // 父组件 <template> <div> <p>父组件传递给子组件的数据为：{{dataToChild}}</p> <child-component :dataFromParent="dataToChild" @send-data-to-parent="getDataFromChild"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { dataToChild: '父组件传递的数据' } }, methods: { getDataFromChild(data) { console.log(`父组件接收到子组件传递的数据为：${data}`) } } } </script>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值