vue的非父子组件的传值详细解析

最新推荐文章于 2023-04-14 19:43:56 发布
最新推荐文章于 2023-04-14 19:43:56 发布
阅读量298 收藏 1
点赞数
分类专栏： vue 学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109328521
版权

在这里插入图片描述
首先我们看一张图 图上
在这里插入图片描述
看上图 我们应该如何做
在这里插入图片描述
是不是感觉很麻烦?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child></child>
        <child></child>
    </div>

    <script>
        Vue.component('child', {
            template: '<idv>child</div>'
        })

        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

我们可以通过一些特定的模式 来搞定.

步骤1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        Vue.component('child', {
            props: {
                content: String
            },
            template: '<idv>{{content}}</div>'
        })

        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

步骤2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{content}}</div>',
            methods: {
                handleClick: function() {
                    alert(this.content)
                }
            }
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

运行效果图
在这里插入图片描述
接下来 我 要把我的值传给另一个组件应该怎么做
首先我们看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{content}}</div>',
            methods: {
                handleClick: function() {
                        this.bus.$emit('change', this.content)
                    }
                    // 这个组件触发其他的组件 要进行监听
            },
            mounted: function() {
                // 这样就可以监听事件
                this.bus.$on('change', function(msg) {
                    alert(msg)
                })

            }
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

但是为什么运行的时候 会触发两次呢
在这里插入图片描述
因为child组件 都进行了同一事件的监听
在这里插入图片描述
然后我们运行代码
在这里插入图片描述
原因是function里的作用域发生了变化
在这里插入图片描述

所以我们需要保存一下this作用域

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{content}}</div>',
            methods: {
                handleClick: function() {
                        this.bus.$emit('change', this.content)
                    }
                    // 这个组件触发其他的组件 要进行监听
            },
            mounted: function() {
                // 所以我们需要对作用域this做一个保存
                var this_ = this
                    // 这样就可以监听事件
                this.bus.$on('change', function(msg) {
                    this_.content = msg
                })

            }
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

这样我们就可以实现组件间的传值了
但是依然会有问题
在这里插入图片描述
因为vue有单向数据流的概念 所以 子组件 不能向父组件 传值. 所以会报错.

解决方案:我们可以通过拷贝content 然后通过data函数进行返回
这样的话 我们就不会对父组件进行改变 自然不会报错了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            data: function() {
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function() {
                        this.bus.$emit('change', this.selfContent)
                    }
                    // 这个组件触发其他的组件 要进行监听
            },
            mounted: function() {
                // 所以我们需要对作用域this做一个保存
                var this_ = this
                    // 这样就可以监听事件
                this.bus.$on('change', function(msg) {
                    this_.selfContent = msg
                })

            }
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

但是以后遇到非父子组件传值的问题 都可以通过bus进行解决

西门吃雪……
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue--click事件传递参数--方法/教程/实例
IT利刃出鞘的博客
11-08 6万+
原文网址： 简介 说明 本文用示例介绍Vue中事件传参的方法。 Vue的事件用法为：v-on:click="xxx"。可以用@click="xxx"来简写。 本处采用click这个事件进行展示，其他的事件也是一样的。 官网 事件处理 — Vue.js 只传自定义参数 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&...
【Vue】Vue中传值的几种方法，案例代码解析
m0_48465196的博客
12-23 2232
Vue中传值的几种方法
uni app @click 传递参数及获取到事件对象
wusejiege6的博客
11-07 1万+
v-on:click 等价于 @click $event 等于自己 1、点击事件方法不带参数，此时默认就带 $event参数(事件对象) @click=“goToPage” 等价于 @click=“goToPage($event)” methods{ goToPage(e){ console.log(e)//此时e打印出来是事件对象 } } 2、带参数，事件对象就没了 @click=“goToPage(12)” methods{ goToPage(e){ conso..
vue: Vuex基础
u012872771的博客
09-13 124
回顾兄弟组件传值。 父组件需要给result组件传值，和接收处理counter组件中传来的自定义事件，实现兄弟组件传值。 <!-- 父组件App.vue --> <template> <div class="container"> <div class="row"> ...
Vue——组件高级——传值
qq_52301431的博客
09-07 2086
子组件通过自定义事件给父组件传count的新值n，父组件收到新值后修改自己的data，自然就会刷新自己 和子组件的模板子组件通过调用父组件的方法给父组件传值:子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值 (重点)**因为通过属性传值是单向的**,有时候我们需要子组件的data 数据需要交给父组件使用:通过在子组件上定义自定义事件，在子组件中通过$emit 来触发事件；子组件的事件被触发并传参，事件处理函数可以接收到子组件的数据；
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
浅谈Vue父子组件和非父子组件传值问题
08-29
Vue 组件传值问题是 Vue 开发中非常重要的一个话题，涉及到父子组件和非父子组件之间的传值问题。今天，我们将一步步地介绍如何在 Vue 中实现组件传值。 组件的创建 创建组件是 Vue 开发的基础步骤。下面是一个...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
组件传值 A.父组件传值给子组件： 基本原理为：props方法 基本写法：例如-父组件对应 Home.vue ；子组件对应 HomeChild.vue 父组件： 1.首先父组件引入子组件，并且注册子组件: improt HomeChild from './...
vue3父子组件传值.doc
02-05
vue3父子组件传值
vue非父子组件间的传值
01-08
vue非父子组件传值的基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名')...
非父子组件之间的三种传值办法
Qian_mos的博客
04-22 3735
非父子组件之间的传值 兄弟组件的传值：总线—发布订阅者—观察者模式 Vue.prototype.属性 = new Vue()，使Vue的原型上的属性等于Vue实例 <div id="root"> <child content="miss"></child> <child content="mos"></child> &l...
vue：非父子组件传值
EchoLiner的博客
04-14 449
非父子组件传值
onclick传递参数
qq_24192465的博客
01-18 805
"> .  " item="" onclick="modfyitem(this)" >修改 . （）" opSort="" opContent="" opScore="" onclick="modfyoption(this)" >修改 function modfyoption(e){
jquery的click()事件如何传参
喵大嗷的博客
12-07 8796
说起jquery的事件如何传参，那么就要先回归到一个问题：jquery绑定事件的时候可以传几个参数呢？ 官方文档给的答案是： 1.如果是通过on绑定的话，可以传入四个参数: jQueryon(events,[selector],[data],fn) 2.如果是直接通过事件绑定的，例如click(),可以传入2个 jQueryclick([[data],
关于vue的@click传递
qq_40088443的博客
03-22 3543
新手做项目碰到了需要操作点击的这个元素的问题。在Jquery里可以直接$(this)就能解决了，但是在vue里，this被赋予了特殊的含义，这样做并不可以。所以当碰上需要传递点击的这个元素时，可以用事件传递。在@click后面加上事件event。示例如下： <div @click="test($event)"> </div> 然后Vue部分： methods:{ t...
vue @click 绑定的函数，如何同时传入事件对象和自定义参数
热门推荐
little_kid_pea的博客
05-01 5万+
1、仅仅传入自定义参数 html : <div id="app"> <button @click="tm(123)">ddddd</button> </div> js : new Vue({ el:'#app', methods:{ tm:function(e){ console.log(e)...
onclick和click区别及传参方式
fn_2015的博客
07-01 3148
onclick是绑定事件 (告诉浏览器在鼠标点击的时候要做什么) click是触发事件 (模拟了鼠标点击操作) click 是方法； onclick是事件； 执行click就是模拟鼠标点击，同时会触发onclick事件。 $(document).ready(function(){ $(".title").click
vue 参数传递的几种方法
小白阿里里的博客
08-22 1万+
开发过程中参数传递 1. 通过 name 传递参数 图一 图二 我们常把页面的路由配置在图一中的 router 文件夹下的 js 文件中，图二为配置的内容。这其中的 name 属性是可以作为参数传递的，在模版中直接只用 {{$route.name}} 接收，即可以在模版中显示。 2. 通过 &amp;amp;amp;lt; router-link &amp;amp;amp;gt; 中的 to 传递参数 使用 &amp;amp;amp;lt;...
vue组件传值
qq_42550235的博客
10-19 248
vue组件的作用域是相对独立的，因此组件与组件之间的传值就相当的重要。 vue组件与组件之间的关系可简单概括为：父子组件、兄弟组件、隔代组件 类型一：父传子： 父组件向子组件传值通常采用绑定属性的方法。子组件通过props数组获取父组件的数据。 1、一个组件可以直接渲染vue里data中的数据。 2、子组件不能直接渲染父组件的数据。 3、如果子组件想要引用父组件的数据，父组件可以在引用子组建的时候...
vue2父子组件传值
最新发布
06-14
以下是一些常见的父子组件传值方法： 1. **Props（属性）**: - **单向数据流**：父组件向子组件传递数据使用`props`。父组件定义props时，需要指定类型，子组件通过`props`接收数据。例如： ```javascript // 父...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值