vue2.0 兄弟组件数据传递方法

最新推荐文章于 2023-12-05 09:43:32 发布
最新推荐文章于 2023-12-05 09:43:32 发布
阅读量69 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhujiasheng/p/8128038.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html</title>
    <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
    <div id="page">
        <com-header></com-header>
        <h3>----------------</h3>
        <com-footer></com-footer>
        <h2>===============对话列表====================</h2>
        <ul v-if="dhList && dhList.length">
            <template v-for="(item,index) in dhList">
                <li><a @click="remove(index)">X</a>&nbsp;{{item}}</li>
            </template>
        </ul>
    </div>

    <script type="text/x-template" id="comHeaderTemplate">
        <div>
            <button @click="sendMess()">
                {{msg}}
            </button>
            <input type="text" v-model="userMess" @keyup.13="sendMess()">
        </div>
    </script>

    <script type="text/x-template" id="comFoooterTemplate">
        <div>
            <button @click="sendMess()" >
                {{msg}}
            </button>
            <input type="text" v-model="userMess" @keyup.13="sendMess()">
        </div>
    </script>
    <script>
        var pu = new Vue();
        var dhList = [];

        var comHeader = {
            template:'#comHeaderTemplate',
            data:function(){
                return {
                    msg:'header',
                    userMess:''
                }
            },
            methods:{
                sendMess:function(){
                    pu.$emit('mess',this.userMess);
                    this.userMess = '';
                }
            },
            mounted:function(){
                pu.$on('mess2',function(m2){
                    console.log("footer:"+m2)
                    dhList.push("footer:"+m2);
                })
            }
        }

        var comFooter = {
            template:'#comFoooterTemplate',
            data:function(){
                return {
                    msg:'footer',
                    userMess:''
                }
            },
            methods:{
                sendMess:function(){
                    pu.$emit('mess2',this.userMess);
                    this.userMess = '';
                }
            },
            mounted:function(){
                pu.$on('mess',function(m){
                    console.log("header:"+m);
                    dhList.push("header:"+m);
                })
            }
        }

        new Vue({
            el:'#page',
            data:{
                dhList:dhList
            },
            methods:{
                remove:function(index){
                    this.dhList.splice(index,1);
                }
            },
            components:{
                comHeader:comHeader,
                comFooter:comFooter
            }
        })
    </script>
</body>
</html>

 

转载于:https://www.cnblogs.com/zhujiasheng/p/8128038.html

weixin_30416871
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 兄弟组件的信息传递的方法实例详解
01-19
前言 兄弟组件的信息传递有三种方式： 1.vuex 传递。 会将信息公有化。 此方法可在所有组件间传递数据。 2.建立Vue 实例模块传递数据。 Vue 实例模块会成为共用的事件触发器。 其通过事件传递的信息不回被公有化。 3.建立事件链传递数据。 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件。 父组件再将信息通过属性传递给另一个兄弟组件。 若兄弟组件不是亲兄弟，而是堂兄弟，也就是他们有一个共同的爷爷，那么此方法会使程序变得繁琐。 一，vuex 传递数据 1.安装vuex npm install vuex --save 2.store.js import Vue from 'vu
VUE中兄弟组件传值方法
qq_41801214的博客
06-19 403
VUE中兄弟组件传值方法 第一步：创建一个vue文件，eventBus.vue，位置随便放 <script> import Vue from 'vue' export default new Vue() </script> 第二步：在传出组件中，引入刚才的vue import eventBus from "../../../static/js/eventBus"; 然后在methods里边定义一个函数 methods:{ changesize(){
Vue中兄弟组件之间的传值方法
blinH的博客
11-14 838
兄弟组件传值 兄弟组件之间传值使用的是$bus的传值方式 同目录下创建bus.js，在里面写上以下代码： // bus.js中只需要写这么多就ok export default { install(Vue){ Vue.prototype.$bus = new Vue({}); } }; 创建后在main.js中引用bus.js，并调用 import bus from './bus.js'; Vue.use(bus); 兄弟传值：传值方 ...
Vue.js中兄弟组件传递数据
wangxiaojia42121的博客
04-14 1018
兄弟组件间的数据通信 功能开发过程，调用通用选择页面获取数据，需要调用一个组件，同时获取返回的数据； 第一步：声明一个各组件都能操作到的公共实例 在main.js中声明一个bus实例：Vue.prototype.bus - new Vue 第二步：被操作组件用$on监听一个方法 第三步：兄弟组件通过$emit传递数据 ...
vue2.0父子组件间传递数据的方法
10-18
本文通过一个小例子给大家介绍了vue2.0父子组件间传递数据的方法，需要的朋友参考下吧
vue2.0 父组件给子组件传递数据的方法
08-28
在父组件 App.vue 中引用子组件 A.vue，把 name 的值传给 A 组件。这篇文章主要介绍了vue2.0 父组件给子组件传递数据的方法,需要的朋友可以参考下
Vue2.0组件间数据传递示例
08-31
本篇文章主要介绍了Vue2.0组件间数据传递示例，组件间数据传递主要是父子组件之间传递，具有一定的参考价值，有兴趣的可以了解一下。
vue兄弟组件传值三种方法总结
weixin_30267691的博客
08-12 3564
在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现兄弟组件传值 首先我的需求是这样的，页面上由top，left，main，bottom四个组件构成。需要将top中的值传到left中。 第一步：创建一个js文件，eventBus.js，位置随便放，我是放在了src目录...
vue组件之间的五种传值方法(父子\兄弟\跨组件)
qq_44693047的博客
11-14 3625
vue组件的五种传值方法(父子\兄弟\跨组件)
Vue组件间数据传递的方式(3种)
10-15
主要介绍了Vue组件间数据传递的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【Vue.js】兄弟组件之间调用对方的方法
热门推荐
非正常人研究室
08-31 1万+
参考：Vue兄弟组件之间如何调用对方的方法 概述 兄弟组件之间的通讯有一个方法是通过父组件进行交互，那么解决的思路就是子组件调用父组件的方法，然后父组件调用另一个子组件的方法，这样就实现了兄弟组件的交互功能。 父组件调用子组件方法 首先被父组件调用的子组件方法定义一下 appendToTree({param}){ console.log('这是子组件tree...
24.Vue中父子兄弟组件传递数据
weixin_43893483的博客
07-23 1520
父子组件、兄弟组件传递数据
vue中兄弟组件之间传递数据,子组件调用父组件事件并传参
m0_46205209的博客
12-04 187
使用方法： vm.emit("事件名（比如click，input等事件，这个不是函数名）",形参)：触发当前实例上的事件。附加参数都会传给监听器回调。−−−−发布vm.emit( "事件名（比如click，input等事件，这个不是函数名）", 形参 )：触发当前实例上的事件。附加参数都会传给监听器回调。 ----发布 vm.emit("事件名（比如click，input等事件，这个不是函数名）",形参)：触发当前实例上的事件。附加参数都会传给监听器回调。−−−−发布vm.on( “事件名”, call
vue兄弟组件传值的五种方法
最新发布
zhuhaiuser的博客
12-05 5165
Vuex 是Vue的官方状态管理库，它可以将组件的共享状态抽离出来，以一个全局单例模式管理。通过 Vuex，兄弟组件可以直接共享状态，实现数据的传递。方法一:使用父组件作为中介在这种方法中，兄弟组件通过共同的父组件来传值。父组件作为中介，负责接收一个组件的数据，并将其传递给另一个组件。$refs是Vue中一个特殊的属性，可以用来访问组件实例或元素兄弟组件通过$refs来获取其他组件的实例，并直接访问其数据。2兄弟组件分别通过$emit 方法触发自定义事件，并通过$on 方法。方法三:使用事件总线。
Vue兄弟组件传值（vue兄弟组件通讯，vue同级组件传值通讯，vue兄弟组件通讯传值常用的两种方式，超详细）
weixin_65793170的博客
01-02 5136
简介:兄弟组件，就是同级别的组件⭐
Vue组件之间传递数据的五种方式_详解
az44yao的专栏
07-10 5203
Vue 组件之间数据传递的几种方式： 父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on 监听事件；缺点：组件嵌套层次多的话，传递数据比较麻烦。 祖先组件通过依赖注入(inject / provide)的方式，向其所有子孙后代传递数据；缺点：无法监听数据修改的来源，不支持响应式。 通过属性$root / $parent / $children / ref，访问根组件、父级组件、子组件中的数据；缺点：要求组件之间要有传递性。 通过事件
【Vue2】兄弟组件传参方法总结
weixin_44431073的博客
05-29 8759
一、前言 之前汇总过父子组件传参的三种方法，感兴趣的可以看我之前的文章：【vue2】子组件向父组件传参方法汇总_能能爱编程的博客-CSDN博客 现在来总结下兄弟间组件传参的方法。分别是【事件总线】和【消息的订阅与发布】两种方式。 二、事件总线 1、介绍 在main.js中定义一个原型属性作为中间值，然后在兄弟组件之间互相触发和接收即可完成数据的通信。收数据的组件绑定自定义事件，发送数据的组件触发自定义事件 2、案例 定义一个学校组件、一个学生组件。学生点击按钮，发送学生人数给学校组件。 3、
Vue中父子组件之间传值 ，兄弟组件之间传值（两种方法）
qq_56989560的博客
04-10 8352
一。子向父传值props 父组件向子组件传值： parent： <parent> <child :message="msg"></child> //父组件发送 </parent> data(){ return { msg: "this is parent message" } } child： <div> <p>{{message}}</p> </div.
vue2.0父子组件传递函数
09-01
在Vue2.0中，父子组件之间可以通过props属性和$emit方法进行函数的传递。 首先，在父组件中，通过props属性将函数传递给子组件。在父组件中定义一个函数，然后将它添加到子组件的props中。例如： ```js // 父组件 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值