Vue(子传父-EventsUp)

最新推荐文章于 2024-03-25 13:01:07 发布
最新推荐文章于 2024-03-25 13:01:07 发布
阅读量251 收藏
点赞数
分类专栏： VUE 文章标签： 子传父-EventsUp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/congnandaobei/article/details/93136744
版权 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>06-组件通信-子传父-EventsUp</title>
  <style>
    .com-a {
      padding: 5px;
      border: 1px solid #000;
    }
  </style>
  <!--  -->
</head>

<body>
  <div id="app">
    <h1>06-组件通信-子传父-EventsUp</h1>
    <com-a @hello="handleHello"></com-a>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    Vue.component('com-a', {
      template: `
        <div class="com-a">
          <p>com-a 组件</p>
          <p>{{ count }}</p>
          <button @click="handleIncrement">点击+1</button>
          <button @click="handleClick">测试</button>
        </div>
      `,
      data () {
        return {
          count: 0
        }
      },
      methods: {
        handleIncrement () {
          this.count += 1

          // 发布一个自定义事件，通知父组件
          this.$emit('hello', this.count)
        },
        handleClick () {
          // 然并卵，了解即可，你是无法预知将来这个组件要在哪里去使用
          // console.log(this.$parent)
          // 所以在这里想要收到一些数据，最好方式让父组件通过 props 传下来
          // 访问父组件数据：props 声明接收
          // 修改父组件数据：Events Up
          //    无法直接去修改
          //    只能告诉父组件，我给你一个要修改的数据
          //    然后父组件收到通知，自己去自己
        }
      }
    })
    const app = new Vue({
      el: '#app',
      data: {},
      methods: {
        handleHello (data) {
          console.log(data)
        }
      }
    })
  </script>
</body>

</html>
Congnandaobei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue子传父案例
01-08
一.html {{item.name}} 二.script //子组件 const cpn ={ template:#cpn, data () { return { movies:[ {id : aaa , name : 家用电器}, {id : bbb , name : 数码宝贝}, {id : ccc , name : 硕果累累}, {id : ddd , name : 南拳北斗}, ] } },
Vue子传父详细教程
m0_62956518的博客
05-05 3万+
子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。 本文父组件：shopping.vue 子组件：shoplist.vue 1.第一步，在父组件中引入子组件（父组件内） import shoplist from '../shoplist.vue' 2.在子组件内定义数据（子组件内） data() { return { children:"this is children" };......
Vue中的子传父、父传子详细（vue2子传父、父传子，vue3子传父、父传子）
最新发布
weixin_65793170的博客
03-25 2486
在 语法中，你不需要显式地导出任何东西，因为所有顶层变量、函数和组件都会自动暴露给模板和其他组件。
Vue组件通信(父传子、子传父、兄弟通信)
亚洲的博客
01-08 2087
一、父传子 首先在父组件的子组件上定义一个属性，在属性上挂载要传输的变量，然后在子组件中通过prop来接收 1、父组件parent.vue <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </templa
vue 父传子 子传父实现方式
weixin_64735754的博客
03-08 1万+
父传子： 主要步骤： 首先在子组件props中创建一个属性，用以接收父组件传过来的值； 然后父组件中引用子组件，并在子组件标签中添加子组件props中创建的属性； 最后把需要传给子组件的值赋给该属性。 理解： 父亲传给儿子东西，儿子在那边用一个碗接，这个碗就是props，因为传的东西不可能只是一个，所以是一个数组，父亲因为要传东西到儿子的碗里，所以要绑定儿子的碗，然后传值 props：properties的简称 prop 只可以从上一级组件传递到下一级组件（父子组件），...
VUE 子组件向父组件传值的方法
热门推荐
小布丁儿的博客
02-21 5万+
一、子组件向父组件传递一个值 子组件： 父组件： 在使用子组件时，绑定change函数的事件处理函数也可以写成如下格式： 绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。 二、子组件向父组件传递一个值，并携带额外参数 record为额外参数( 本文的额外参数都拿record做举例 )。 子组件： 父组件： 绑定事件处理函数时，record和$event的顺序不做要求，但是按照vue..
【Vue】子组件向父组件传值的几种方式
qq_30082553的博客
04-11 7388
自定义props可以是任何类型，包括Function。所以我们也可以利用这一点来实现子组件向父组件传值。例子：子组件CheckBoxGroup.vue-- 按钮onclick时，触发父组件checkboxConfirm事件，并携带参数selectedNames -- > < button @ click = "sendSelectedNames" > 确认 < / button > < / template >父组件App.vueimport {
vue 组件传值 子传父
weixin_48297537的博客
09-21 336
父组件代码 1、父组件中需要做的是，定义一个方法； 2、其中changeTitle是子组件通过$emit(第一个参数，第二个参数)传递过来时的第一个参数 3、在方法 chengtitleA 中进行子组件传递过来的数据操作； <template> <div class="mainPage"> <div class="title" > <bartitle @changeTitle='chengtitleA'></
Vue组件之间的通信-父传子-子传父
m0_71485750的博客
07-25 1642
前面我们是将所有的逻辑放到一个App.vue中： 我们可以按照如下的方式进行拆分： 按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可, App.vue中的代码如下 : 上面的嵌套逻辑如下，它们存在如下关系：在开发过程中，我们会经常遇到需要组件之间相互进行通信：总之，在一个Vue项目中，组件之间的通信是非常重要的环节，所以接下来我们就具体学习一下组件之间是如何相互之间传递数据的；父子组件之间如何进行通信呢？在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示：什
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue 翻页组件vue-flip-page效果
10-15
主要介绍了vue 翻页组件vue-flip-page，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
10-18
在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值，需要的朋友参考下吧
Vue三种常用传值示例(父传子、子传父、非父子)
12-29
1、父组件向子组件进行传值： 父组件： 父组件: <input type=text v-model=name> <!-- 引入子组件 --> [removed] import child from './child' export default { components: { child }, data () { return { name: ''
vue-dataflow-editor-Vue2数据流图编辑器-Vue.js开发
05-27
vue-dataflow-editor嗨，您可以使用https://github.com/jagenjo/litegraph.js。...导入“ @ krthr / vue-dataflow-editor / dist / vue-dataflow-editor.css”； const app = new Vue（{/ * ... * /}）;
Vue的props父传子的示例代码
10-15
主要介绍了Vue的props父传子的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue--子传父、父传子
weixin_66375317的博客
05-08 4323
vue --子传父 、父传子
深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏
czjl6886的博客
11-28 1万+
深度理解Vue组件的子组件向父组件传递数据的通信方式：Vue子组件向父组件传递数据的通信方式有很多，我这里列举了三种，全面详细，看这一篇就够了，推荐收藏！
vue子组件向父组件传值的三种方式
bidepanm的博客
04-27 4万+
一、通过父组件给子组件传递函数类型的props实现 父组件： <Child :getChildInfo="getChildInfo"></Child> 子组件： <button @click="sendChildInfo"></button> props: ['getChildInfo'] sendChildInfo() { this.getChildInfo(数据); } 二、通过父组件给子组件绑定自定义事件实现 第一种方式： 父组件： <c
vue子传父sync
09-25
.sync修饰符用于实现Vue中的子组件向父组件传递数据并实现双向绑定。通过.sync修饰符，可以将子组件的数据更新反映到父组件中。 在父组件中，使用.sync修饰符时，需要将子组件的属性值用v-bind.sync绑定到父组件中的一个变量上。然后，通过监听子组件的update事件，在事件处理函数中更新父组件的变量。 举个例子，假设有一个父组件和一个子组件，父组件将一个变量doc传递给子组件： 父组件代码： ```html <template> <div> <h1>父组件：{{doc.title}}--{{doc.content}}</h1> <Child v-bind.sync="doc"></Child> </div> </template> <script> import Child from './child.vue' export default { data() { return { doc: { title: '前端', content: 'Vue', }, } }, components: { Child, }, } </script> ``` 子组件代码： ```html <template> <div> <input v-model="localTitle" /> <button @click="updateParent">更新父组件</button> </div> </template> <script> export default { props: ['title'], data() { return { localTitle: this.title, } }, methods: { updateParent() { this.$emit('update:title', this.localTitle) }, }, } </script> ``` 在子组件中，使用v-model指令将子组件中的输入框与localTitle变量进行双向绑定。然后，在点击按钮时，通过$emit方法触发update事件，并传递localTitle作为参数。 在父组件中监听update事件，并在事件处理函数中更新父组件的doc.title属性值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值