兄弟组件之间传参

最新推荐文章于 2024-02-23 17:56:29 发布
最新推荐文章于 2024-02-23 17:56:29 发布
阅读量846 收藏
点赞数
分类专栏： Vue 文章标签： 组件间的传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hemeng0115/article/details/85234067
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件控制父组件</title>
    <style>
        .show{
            width:100px;
            height: 100px;
            text-align: center;
            font-size: 20px;
            line-height: 100px;
            background-color: rgba(0,0,136,0.36);
        }
    </style>
</head>
<body>
<div id="app">
    vue实例{{state}}
    <hr>
    <a1 @custom="custom"></a1>
    <hr>
    <b1 :test="state"></b1>
</div>
<template id="a">
    <div>
        这是a组件
        <button @click="emit">a里的按钮触发事件</button>
    </div>
</template>
<template id="b">
    <div>
        <div class="show" v-if="test">这是b组件{{test}}</div>
        <button>b里的按钮</button>
    </div>
</template>
<script src="vue.js"></script>
<script>
    Vue.component('a1',{
        template:"#a",
        data(){
            return{

            }
        },
        methods:{
            emit(){
                this.$emit('custom');
            }
        }
    })
    Vue.component('b1',{
        template:"#b",
        data(){
            return{

            }
        },
        props:['test'],
        methods:{

        }
    })
    new Vue({
        el:"#app",
        data:{
            state:true
        },
        methods:{
            custom(){
                this.state=!this.state;
            }
        }
    });
    //两个组件，兄弟关系，其中一个可以控制另外一个的显示与隐藏
</script>
</body>
</html>

结果截图：

hemeng0115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
兄弟组件之间的传值
ass_ace
02-24 5108
1. 利用相同的父组件进行兄弟组件之间的数据传递 子组件A通过回调函数的形式将数据传递给父组件，父组件再通过属性将数据传递给子组件B 代码示例如下： 父组件 class CommentApp extends Component { constructor() { super() this.state = { info: [] } } handleSubmit(con) { ...
兄弟组件之间传值通过
weixin_48912846的博客
04-12 161
SubSon1 <div>汽车：{{car}} <button @click="carToSon2">传给Son2</button> </div> data() { return { car:{ type:"奔驰", price:"50W" } } }, methods: {
Vue父子组件，兄弟组件间传值（最简洁）
yuan
09-20 340
初始状态： 父组件： <template> <div class="home"> 首页(父组件) <advert /> <advert-space /> </div> </template> <script lang="ts"> import Vue from 'vue' import advert from '../advert/index.vue' import advertSpace
常见组件传参方式
weixin_55869781的博客
04-25 4910
VUE中的几种组件传参方式 对于vue来说常见的就是兄弟传值，父子传值 1.父传子 在父组件中定义数据，子组件通过props接收父组件传递的数据加以使用 父组件中 <div class="box"> <p>这是父组件</p> <son :list="list"></son> </div> 子组件中 props:['list'], //接收到父组件数据
【Vue2】兄弟组件传参方法总结
weixin_44431073的博客
05-29 8831
一、前言 之前汇总过父子组件传参的三种方法，感兴趣的可以看我之前的文章：【vue2】子组件向父组件传参方法汇总_能能爱编程的博客-CSDN博客 现在来总结下兄弟间组件传参的方法。分别是【事件总线】和【消息的订阅与发布】两种方式。 二、事件总线 1、介绍 在main.js中定义一个原型属性作为中间值，然后在兄弟组件之间互相触发和接收即可完成数据的通信。收数据的组件绑定自定义事件，发送数据的组件触发自定义事件 2、案例 定义一个学校组件、一个学生组件。学生点击按钮，发送学生人数给学校组件。 3、
vue组件之间的五种传值方法(父子\兄弟\跨组件)
qq_44693047的博客
11-14 3663
vue组件的五种传值方法(父子\兄弟\跨组件)
Vue.js父与子组件之间传参示例
10-20
Vue.js提供了多种方式来实现父组件与子组件之间参数的传递。以下是对标题和描述中所述知识点的详细说明： 1. **父组件向子组件传参（Props）** 在Vue.js中，父组件向子组件传递参数通常通过`props`属性实现。例如...
基于vue 兄弟组件之间事件触发(详解)
09-09
在某些情况下，我们可能需要实现兄弟组件之间的事件触发，例如，一个组件的行为需要影响另一个组件的状态。本文将详细讲解如何在Vue中实现这一功能。 首先，我们要明确一点：Vue推荐使用自上而下的数据流，即从父...
vue-router2.0 组件之间传参及获取动态参数的方法
08-28
Vue Router 2.0 组件之间传参及获取动态参数的方法 在 Vue.js 框架中，组件之间传递参数是一种常见的需求，尤其是在使用 Vue Router 进行路由管理时。下面我们将介绍 Vue Router 2.0 组件之间传参及获取动态参数的...
wx-component-param:微信小程序组件之间传参demo
05-11
1.创建组件 打开微信开发者工具，创建组件，会生成四个文件：wxml,wxss,js,json 在wxml中： 我是组件A 在js中： Component({ behaviors: [], properties: { }, data: { }, // 私有数据，可用于模版渲染 // ...
vue兄弟组件传值的3种方法
热门推荐
mrsun_web
08-30 2万+
1，bus总线传值 2，常规子1传父->父传子2 3，vuex 这里详细说明bus总线传值的总路线及方法：本例为基本用法，如果不理解的可以看下面的详细使用方法： //bus.js import Vue from 'vue'; export default new Vue; //使用 兄弟A 传值 import bus from '路径' bus.$emit('自定义事件名称',输出数据) //使用 兄弟B 接值 import bus from '路径' bus.on('自定义事件名',(r
组件间传参
qq_20623665的博客
12-17 118
父向子传参: 在子组件的标签上通过自定义属性传递父组件的数据,子组件的内部通过 props 接收父向子传递的数据子向父传参: 在子组件的标签上自定义事件,自定义事件的值是父组件的方法,在子组件内部通过 this.$emit()方法触发事件，第一个参数为自定义事件,第二个参数可以传递子组件的内部数据,此时父组件中的方法就可以执行了,兄弟组件无关联关系组件传参：组件共享数据都是用的 vuex。
组件之间传参方式
H____16的博客
07-17 685
整理出组件之间传参方式一共12种。
组件之间传值的8种方式
2301_76348120的博客
07-29 2802
组件之间传值的8中方式
兄弟组件之间的传值vue
Heartnottowake的博客
03-23 7294
兄弟组件之间的数据操作 。。将子组件的数据放在父组件维护 。。操作声明在父组件，传到另一个子组件就可实现兄弟组件间的数据操作 方法1------------------------------------------------ 这是父组件，通过父组件定义一个数组list，传给组件1进行v-for渲染出来，定义一个方法用于删除元素，传给组件2 <template> <div id="app"> 父组件 <hr> <Course :li
vue3的兄弟传参（三种方法）
weixin_45441173的博客
08-03 9683
vue3的兄弟传参（三种方法）
vue兄弟组件传值的五种方法
zhuhaiuser的博客
12-05 5686
Vuex 是Vue的官方状态管理库，它可以将组件的共享状态抽离出来，以一个全局单例模式管理。通过 Vuex，兄弟组件可以直接共享状态，实现数据的传递。方法一:使用父组件作为中介在这种方法中，兄弟组件通过共同的父组件来传值。父组件作为中介，负责接收一个组件的数据，并将其传递给另一个组件。$refs是Vue中一个特殊的属性，可以用来访问组件实例或元素兄弟组件通过$refs来获取其他组件的实例，并直接访问其数据。2兄弟组件分别通过$emit 方法触发自定义事件，并通过$on 方法。方法三:使用事件总线。
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前端、python爱好者
10-24 7583
1. props 和 emits传参 2. 路由传参（query、params） 3. 第三方库（pubsub-js）
Vue中兄弟组件之间传值
最新发布
jq2588的博客
02-23 611
在中，我们在使用不同组件的时候，组件之间可能会需要相互传值。以下有三种兄弟组件之间传值的方法。// 这里我让Older组件向younger组件传值// 父组件divOlder:msg-olderchange"change"
vue兄弟组件之间传参
07-12
在 Vue 中，兄弟组件之间传参有几种常见的方式： 1. 使用共同的父组件作为中介：在父组件中定义一个数据属性或者方法，然后通过 props 将其传递给两个兄弟组件。兄弟组件可以通过修改父组件的属性或者调用父组件的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值