vue2.0 组件 子级父级传值。

已于 2022-08-08 09:34:26 修改
阅读量260 收藏
点赞数
文章标签： 前端 javascript html vue.js
于 2022-08-08 09:29:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45597687/article/details/126221295
版权
本文介绍了Vue中父子组件间的通信方式，包括父组件如何通过props向子组件传递数据，以及子组件如何通过$emit触发父组件的方法进行数据交互。在示例中，子组件接收并使用了父组件传递的`instCode`，并且调用了一个名为`change-type`的事件，将数据回传给父组件。父组件则监听这个事件，接收到数据后清空了`instCode`。
摘要由CSDN通过智能技术生成

1、子组件

接受父组件传的值：

 props: ['getInstCode','getDocCode']

data() {
  return {
    instCode:this.getInstCode,
  }
},

调用父组件方法

this.$emit('change-type', '子组件数据');

2、父组件

<WsPreview v-if="instCode"  :getInstCode="instCode" :getDocCode="docCode"  @change-type="onChangeType"></WsPreview>
import WsPreview from '@/components/WsPreview/index'
components: {
      WsPreview
},
onChangeType(name){
    this.instCode=''
    console.log(name)  //子组件传过来的数据
},
.. ..
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
共同学习，共同成长
05-10 4528
Vue2中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
Vue2.0 子组件传值给父组件
zeroone001的专栏
03-31 3万+
this.$emit(event,...args); /* * event: 要触发的事件 * args: 将要传给父组件的参数 */ Usage： 子组件内容：<template> <div @click="iclick"></div> </template> methods:{ iclick(){ let data = { a:'data
Vue2.0子父组件通信
大灰狼的小绵羊哥哥的博客
03-01 1048
Vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此就不做赘述，本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境，我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦) 环境搭建步骤： 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-de
vue2.0 子组件和父组件之间的传值（转载）
小诸葛的博客
07-05 177
https://www.cnblogs.com/daiwenru/p/6694530.html
vue 子组件获取父组件传值
qq_17627195的博客
10-28 1746
父组件 // 记得先引入声明什么的 <Search v-if="search_show" :title="title" /> 子组件设置： export default { props: { title: { type: String, default: "默认值", }, } }; 子组件调用： <div>{{ title }}</div> ...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。 一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/...
Vue2.0 组件传值通讯的示例代码
08-29
Vue2.0 组件传值通讯是Vue.js框架中非常重要的一个特性，它允许我们在组件之间有效地共享数据和触发交互。在本文中，我们将通过一个简单的评价组件示例来深入理解这一概念。 首先，我们分析组件设计思路： 1. **...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父...
vue2.0全局组件之pdf详解
08-30
Vue2.0 全局组件之 PDF 详解 在 Vue2.0 中，使用全局组件来实现 PDF 文件的预览是一种常见的需求。以下是关于 Vue2.0 全局组件之 PDF 详解的知识点总结： 1. 使用 pdf.js 库 在该组件中，我们使用了 Mozilla 开发...
子组件给父组件传递数据（vue2）
YanHSama的博客
06-28 470
子组件给父组件传递数据
详解VUE里子组件如何获取父组件动态变化的值
10-17
主要介绍了详解VUE里子组件如何获取父组件动态变化的值，子组件通过props获取父组件传过来的数据，子组件存在操作传过来的数据并且传递给父组件,需要的朋友可以参考下
「VUE架构」Vue2.0 子组件传值父组件
AIGC大前端小王子
04-09 547
本文主要介绍Vue子组件像父组件传值 一、通过事件触发子组件，将参数传递给父组件 1.子组件页面DOM部分 Header.vue &lt;div class="detail-close" @click="hideDetail"&gt; &lt;i class="icon-close"&gt;&lt;/i&gt; &lt;/div&gt; 注：重点是@c...
vue2父子组件之间传值详细介绍
shi15926lei的博客
07-13 4930
在上面的例子中，子组件通过点击按钮触发sendMessage方法，并通过this.$emit方法触发一个名为message-sent的事件，并将要传递给父组件的数据作为参数传递进去。父组件通过@message-sent监听子组件触发的事件，并在触发时执行handleMessage方法，获取传递的数据并赋值给receivedMessage。在父组件中，通过v-on指令监听子组件触发的事件，并在触发时执行相应的方法，获取传递的数据。在父组件中，使用子组件的标签，并通过属性将数据传递给子组件。
VUE2 : 父子组件传值
最新发布
yuanchun的知识整理
05-14 2013
父子组件传值
【vue2】组件基础与组件传值(父子组件传值)
嗨，朋友你好！我是前端领域的工作者
01-15 4063
组件基础概念与全局|局部组件的写法、组件之间传值（父传子、子传父的使用方法与注意事项）
Vue2.0开发之——组件数据共享-父向子传值(38)
我的博客
01-12 434
组件之间的关系父向子传值子向父传值more。
vue中的父级传值到子级的交互
spicyboiledfish的博客
03-20 3112
父组件： <div> 我是父亲 <child :is_nike="isNike"></child> </div> <script> export default { components: { child }, data(){ return { isNike: true ...
vue2中父子传值的5种方式？
weixin_45724850的博客
07-14 1万+
使用ref可以更精确地访问特定的子组件实例，并且不需要依赖于子组件在this.$children数组中的位置。补充：在Vue.js中，可以通过在子组件上添加ref属性，并指定一个唯一的名称，来创建一个引用。3.parent和children：通过访问父组件的this.parent或子组件的this.children属性来直接访问父组件或子组件的实例，并进行数据传递。1.父传子：props， 父组件通过属性绑定的形式将数据传递给子组件，并在子组件中定义props来接收。获取父组件实例，并访问了父组件实例的。
VUE 子组件向父组件传值的方法
热门推荐
小布丁儿的博客
02-21 5万+
一、子组件向父组件传递一个值 子组件： 父组件： 在使用子组件时，绑定change函数的事件处理函数也可以写成如下格式： 绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。 二、子组件向父组件传递一个值，并携带额外参数 record为额外参数( 本文的额外参数都拿record做举例 )。 子组件： 父组件： 绑定事件处理函数时，record和$event的顺序不做要求，但是按照vue..
vue2.0 父子组件传值
05-01
Vue 2.0 中父子组件之间的传值可以通过属性(prop)和事件(event)实现。 1. 属性(prop)传递值 父组件通过在子组件上定义prop属性，指定要传递的值类型和名字，然后将值传递给子组件的prop属性。子组件通过props接收到父组件传递的值，可以直接使用。 例如：父组件中定义一个名为message的prop属性，值为字符串类型，在模板中通过子组件标签向子组件传递值。 ``` // 父组件 <template> <div> <child-component :message="hello"></child-component> </div> </template> <script> import ChildComponent from './child-component.vue' export default { components: { ChildComponent }, data () { return { hello: 'hello, world' } } } </script> // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: { message: { type: String, require: true } } } </script> ``` 2. 事件(event)传递值 父组件通过定义一个事件，在子组件中触发该事件并传递需要传递的值。子组件在父组件中使用子组件自定义的事件，并获取到传递的值。 例如：子组件定义一个自定义事件，触发时传递一个字符串类型的值。父组件中使用子组件，同时监听子组件的自定义事件，在事件回调函数中获取到子组件传递的值。 ``` // 子组件 <template> <button @click="changeMessage()">改变消息</button> </template> <script> export default { methods: { changeMessage () { this.$emit('change', '新消息') } } } </script> // 父组件 <template> <div> <child-component @change="handleChange"></child-component> <div>{{ message }}</div> </div> </template> <script> import ChildComponent from './child-component.vue' export default { components: { ChildComponent }, data () { return { message: '旧消息' } }, methods: { handleChange (newValue) { this.message = newValue } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.. ..

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值