Vue.js和vue-router中的兄弟组件？
在Vue.js和vue-router中，兄弟组件是指在同一个父组件下直接平级存在的组件。兄弟组件之间可以通过共享父组件的数据进行通信和交互。
兄弟组件之间的通信可以通过以下几种方式实现：
- Props和$emit：父组件可以通过props属性将数据传递给子组件，而子组件可以通过$emit方法触发自定义事件，将数据传递给父组件。兄弟组件之间可以通过共享父组件的数据进行间接通信。
- EventBus：Vue.js提供了一个事件总线（EventBus）机制，可以在任何组件中进行事件的发布和订阅。兄弟组件可以通过事件总线来进行直接通信，一个组件可以发布一个事件，而另一个组件可以订阅该事件并接收数据。
- Vuex：Vuex是Vue.js的官方状态管理库，用于集中管理应用的所有组件的状态。通过在Vuex中定义共享的状态，兄弟组件可以直接访问和修改这些状态，实现数据的共享和通信。
- $parent和$children：Vue.js提供了$parent和$children属性，可以在组件实例中访问父组件和子组件的实例。兄弟组件可以通过访问共同的父组件实例来进行通信。
- $refs：Vue.js提供了$refs属性，可以在组件中通过ref属性给子组件或DOM元素添加引用。兄弟组件可以通过$refs来访问其他兄弟组件的实例或DOM元素，从而进行通信。
兄弟组件的应用场景包括但不限于以下几种：
- 列表和列表项：兄弟组件可以用于实现列表和列表项的关系，其中列表组件负责渲染整个列表，而列表项组件负责渲染每个列表项的内容。
- 标签页和标签项：兄弟组件可以用于实现标签页和标签项的关系，其中标签页组件负责渲染整个标签页，而标签项组件负责渲染每个标签项的内容。
- 表单和表单项：兄弟组件可以用于实现表单和表单项的关系，其中表单组件负责管理整个表单的状态和提交操作，而表单项组件负责渲染每个表单项的内容。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全可靠、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
1回答
Vuex专卖店“严格:真”不起作用
vue.js、vue-component、vuex
当我设置strict: true时，我会得到错误：
vue.js:525 [Vue warn]: Error in watcher "state"
(found in root instance)
warn @ vue.js:525
run @ vue.js:1752
update @ vue.js:1720
notify @ vue.js:584
reactiveSetter @ vue.js:814
Transform.resize @ transform.js:169
e.resize @ map.js:343
e._onWindowResize @ map.js:12
浏览 2提问于2016-12-29得票数 1
回答已采纳
1回答
如何设置/获取其他导入组件的数据？
vue.js、vue-component
只要学习Vue，请帮帮忙， 我可以导入一些组件 import products from './components/products.vue' 如何获取/设置一些数据，例如 props: {msg: String},data(){ return {bar: 2019}},
浏览 21提问于2019-05-08得票数 0
回答已采纳
3回答
在vue中不工作的同级组件通信
javascript、vue.js、components
我正在尝试将this.TC从typing.js发送到send page.js，这是同级组件。发射和事件中心无法工作。但是发出从typing.js到父工作，我想要。(这个应用程序中只会有一个调用，所以我不想使用Vuex，如果没有这个必要的话-我想用简单的发射)下面是我的代码：
父母：
<template>
<div id = "app">
<typing v-if = "DynamicComponent === 'typing'" />
<ending_page v-e
浏览 1提问于2019-02-20得票数 0
4回答
在Vuejs应用程序中使用Vuex
vue.js、vuex
我是Vue.js的新手。我学到了一个叫做vuex的概念。请任何人能给我解释一下我什么时候应该使用vuex。
浏览 4提问于2018-09-13得票数 0
7回答
角7-共享数据
angular、angular7
在角度7中的组件之间共享数据的最佳方法是什么？
@Input和@Output能否仅用于子组件和父级关系中的组件？
浏览 1提问于2018-12-05得票数 5
回答已采纳
2回答
儿童与儿童的沟通
vue.js、vue-component
我的组件很大，所以我会给你简单的例子，也许有人会知道如何解决我的问题。
我有发票组件的子组件，如‘小计’，‘vat_小计’，‘总计’(这是例子)。我正在使用v从发票组件直接访问每个孩子。此外，从发票属性计算小计，然后从子属性小计计算vat_subtotal。“总计”是从vat_subtotal儿童中计算的。
示例：
invoice.$refs.subtotal.total = {some calculations}
vat_subtotal.total = @$parent.$refs.subtotal.total * 1.21
total.total = @$parent.$refs.vat
浏览 2提问于2016-09-17得票数 0
回答已采纳
1回答
从child1组件访问child2组件的方法
reactjs、react-native、react-redux、components
目前我有三个组件：Child1、Child2和Parent。当按下Child2中的一个按钮时，我想在Child1组件中调用一个函数。
到目前为止，我一直在尝试这样做，但我总是说错话。
this.refs.child.child2Function is not a function
处理这种情况的正确方法是什么(从另一个子组件调用一个子组件中的函数)？
我还在我的项目中使用redux。但是我的Child2组件是在多个选项卡中呈现的。因此，我不能使用redux更新该值，因为该值将在整个Child2组件中更新。
Parent.js
class Parent extends Component{
p
浏览 1提问于2018-08-15得票数 1
1回答
用React.js点击按钮后几个元素的状态变化
reactjs、material-design
我在React.js上使用资料-ui，我的main.jsx中有几个资料-ui组件。
TextField
getInitialState: function() {
return {
errorTextName: '',
errorTextAge: '',
errorTextCity: '',
errorTextState: ''
};
}
<TextField
id="name"
errorText={this.st
浏览 3提问于2015-04-08得票数 1
1回答
vuex状态管理在使用django实现多页应用程序时会有用吗？
python、django、vue.js、vuex
我以前用Vue和Vuex创建了一个单一页面应用程序，用于状态管理，并且正在研究使用django后端框架的多页面应用程序。我很想知道，在这种情况下，包括vuex国家管理会有什么好处吗?或者后端会负责国家管理吗？
浏览 0提问于2018-07-14得票数 0
回答已采纳
1回答
如何在不同模板之间传递数据
vue.js
我正在尝试聊天，我不知道如何单击一个模板中的一个项目，获取数据并将其传输到另一个模板。从#模板1到#模板2
const app = new Vue({
el: '#content',
data:{
users: [],
messages: []
}
});
template1
<template lang="html">
<li v-on:click="getMessages()">
<div class="content-container">
浏览 5提问于2017-07-30得票数 1
回答已采纳
2回答
Angular 2组件通信混乱
angular
我最近开始为一个新的项目使用angular 2，对于下面的项目，我对什么是最好的方法感到困惑。
我有一个父组件(根)，它有3个子组件，A(表格格式的搜索结果项列表)，B( google地图)和C(具有多个输入/选择下拉列表的表单)。
就搜索条件参数而言，组件C(细化形式)应该是主驱动程序，该参数由位于我已注入到根父组件中的服务中的API端点使用。返回的对象(当前是http调用的可观察值)将用于提供所有3个子组件、渲染列表、映射等。
现在，我真的想不通的是：
1)我应该如何从refine组件中的输入/选择中获取数据？我应该为每个字段实现输出吗？或者根父级是否应该使用viewChild以某种方式监
浏览 0提问于2016-12-02得票数 4
2回答
在Vue中使用Vuex以及事件总线
javascript、vue.js、state、vuex、event-bus
我已经有相当一段时间把这个问题隐藏在我的脑海里了。我正在运行一个非常复杂的Vue应用程序，它处理许多必须通信的组件，因此我使用非常结构化的Vuex设置，使用它的module系统。但是，对于特定的一组组件，比如一个comments文件夹，即：
评论目录：
Comments.vue //总体评论部分
每个注释的Comment.vue //组件
创建新注释的NewComment.vue //组件
仅用于这三个组件的bus.js //预留事件总线
仅为这三个组件使用该目录中的保留Event Bus来相互通信是可以的吗，还是因为我已经有了一个大型的vuex系统，所以这被认为是“错
浏览 1提问于2018-07-06得票数 10
2回答
有条件地创建react组件时抛出错误
javascript、reactjs
我有一个名为ListChats的react组件和另一个名为Chat的组件。
ListChats调用聊天的呈现
我需要的是，如果在呈现聊天时出现错误，ListChats会知道并返回可用聊天列表。
一个可能的错误，它的捕获尚未实现，将是如果用户没有名称，聊天捕获此错误并返回到ListChat。
ListChats组件：
import React, { Component } from "react";
import Chat from "../Chat";
import { Button } from 'react-bootstrap';
exp
浏览 3提问于2021-02-16得票数 1
2回答
React Native在同级视图之间传递数据
react-native、siblings、pass-data、navigator-ios
我正在使用React Native开发一个简单的待办事项列表应用程序，我的问题如下:我在项目的根目录下有一个NavigatorIOS，其中包含一个ListView作为初始路由的组件，以及一个指向任务创建视图的导航栏按钮。
创建新任务后，将弹出该视图，以便显示ListView。我正在尝试将新创建的任务添加到这个ListView中(它的数据源包含在组件状态中)。
我会在纯原生应用程序中使用委托，但在这里，两个视图都是由NavigatorIOS实例处理的。
index.ios.js
addTask() {
console.log("Test");
},
render() {
浏览 16提问于2015-04-14得票数 16
2回答
将站点从jQuery转换为从组件切换到响应
jquery、reactjs、components
第一次这么问，我希望我做得对。
最近才开始反应。我现在正试着把我的一个老地盘改造成反应。
该数据是444个标记文件，这些文件被加载到一个对象数组(前端和内容)中，其中包含有关各种医疗药物的信息。在左侧，我需要一个侧栏，其中包含所有药物名称的列表，单击后，它将切换一个组件，显示与单击的名称相对应的标记文件的实际内容。
您可以在上看到基于jQuery的站点(它是丹麦语，但内容并不重要)。我被困在如何通过点击名称(左侧导航)来切换信息框(中间)。
这里有一幅描述这个问题的图片(我们可以忽略右边的窗格，我只是给它添加了一个很好的方法，因为它现在就在这个网站上，我希望它最终能够实现)：
(抱歉，还不能
浏览 3提问于2017-04-02得票数 1
回答已采纳
2回答
请帮助我解释在Angular 4中使用嵌套组件的最佳方法，以及将父组件的方法调用给子组件，反之亦然。请用一个例子和现场编辑来解释。
提前谢谢。
我想学习和设计我自己的表集或其他组件使用角4，如tabset，ngx-引导，但更多提前。我对角> 2很陌生。
以下是情况：
从组件中公开几个api。
使用该api将/寄存器/检索数据/方法/设置设置为/从组件。
我想学习如何使用不同的软件设计模式作为一个框架来构建一个组件。
因此，要从不同组件间的交流经验中正确地获取深度知识。我的官方文件如下：
浏览 1提问于2017-07-31得票数 1
回答已采纳
1回答
反应不同组件之间的通信
reactjs、react-router、react-props
我知道这一点，我试图传递一个用户的细节从一个js页面显示在另一个反应，但我不知道如何完成这一点。下面是我所拥有的
我不确定是否应该使用App.js路由将道具传递到显示页，还是可以在输入详细信息的页面上传递NavLink?？任何帮助都是非常感谢的。
这是我的APP.js路由。我应该把道具递给这里的书页吗？
import React, { Component } from 'react';
//import PostList from './posts/YourDetails'
import { BrowserRouter, Switch} from 're
浏览 0提问于2019-01-11得票数 0
回答已采纳
1回答
角2表-相互交谈的标签
javascript、html、angular、typescript
目前，在我的项目中，我有一个angular2表集，它显示其他html模板，如
Tabs.html
<tabset class="Myclass">
<tab heading ="Page1" (select)="sendMessageToPage2(Message)"<PageOne id="0"></PageOne></tab>
<tab heading ="Page2" (select)="sendMessageToPage1(Mess
浏览 2提问于2016-09-13得票数 0
回答已采纳
2回答
Angular2+ -如何动态选择子组件并调用其函数？
angular、vuejs2
我有一个关于Angular2 +(不是AngularJs)的问题。我是一个Vue.js程序员，我很好奇它是否有可能在角度上。
假设您的应用程序具有许多执行许多任务的模块。您有一个前端应用程序负责监视模块状态；显示日志、错误、通知用户某些模块已经完成工作等。这些模块通过WebSocket (或STOMP)与前端对话。如果前端接收到消息，则必须对其进行处理，并且必须更新模块的相应状态(例如标题)。因此，如果角接收到消息，他必须动态选择子组件并更新其状态(调用子方法)。
这是它在Vue.js:中的样子
父组件的内容：
<module ref="moduleA" ><
浏览 1提问于2018-09-11得票数 3
回答已采纳
3回答
在angular 7中的两个同级组件之间传递数据
angular
这里的要求是，我需要在主目录中显示登录的用户，因为我有一个登录组件homecomponent，为了进行数据传输，我使用了一个名为dataService.ts的服务，对我来说，数据将传输到dataService.ts，但不会传输到主目录组件
我的代码
loginComponent中导入的数据服务
this.userName由登录的用户名组成
登录组件：
this.ds.sendMessage(this.userName);
dataService：
import { Injectable } from '@angular/core';
import { Subject } fro
浏览 0提问于2019-03-01得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
