首页 > 其他分享 >Vue2.x下的各组件如何传递信息?(不使用Vuex)

Vue2.x下的各组件如何传递信息?(不使用Vuex)

时间:2022-11-14 22:15:01浏览次数:50  
标签:自定义 Vuex 传递信息 方法 传递 Vue2 组件 数据

Vue2(选项式)
一,父组件向子组件传递数据:

介绍:在引用的子组件中定义 自定义属性 msg与user.可以通过v-bind 绑定要发送的数据。   在子组件中使用 props 接收自定义属性msg与user. 可以直接在模板中使用。但是如果想要修改的话建议传到data中,再进行修改。 代码如下:

 

二,子组件向父组件传递数据:

介绍:先在子组件的methods方法中定义一个触发的方法,在方法中使用 this.$emit(a,b). 定义自定义事件a.  b 为要传递的数据。  在父组件中引用的子组件中, 使用v-bind绑定 自定义事件 a.    后面设置方法c。 通过给方法c 传参的方式,获取从子组件传递过来的数据b.  代码如下: 

三,兄弟组件之间传递信息

介绍:有点像把子组件a的数据传递给父组件,父组件再将数据传递给子组件b.  只不过使用了 EventBus充当了中间的传递对象。

①:创建爱你eventBus.js 模块,并向外共享一个Vue的实例对象

②:在数据发送方,调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件

③:在数据接收方,调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

 

标签:自定义,Vuex,传递信息,方法,传递,Vue2,组件,数据
From: https://www.cnblogs.com/zy-feng/p/16890512.html

相关文章

  • vue2项目中使用 vue2-org-tree组件实现组织架构图
    1.安装及使用操作流程npm安装:npmivue2-org-tree安装loader,不然会报错npminstall--save-devlessless-loadermain.js文件引入并使用:importVue2OrgTreefrom'vue......
  • Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题
    前言工作中经常会用到类似于dialog、toast、popover等一些状态提示组件。对于这种全局性的组件,通常会用到vuex来管理组件的信息。这样的好处是代码维护起来更加友好,但......
  • Vue面试题48:你觉得Vuex有什么缺点?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    体验使用模块:用起来比较繁琐,使用模式也不统一,基本上得不到类型系统的任何支持:conststore=createStore({ modules:{a:moduleA}})store.state.a......
  • 46.使用过vuex和vue-router吗
    使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用;vuex 的内部的运行机制:state提供了数据驱动视图,dispath派发actions执行异步操作,comm......
  • 组件之间的通信2-->vuex状态管理
    在上期,我们讲了父子组件的传递方式,但是,如果我们想知道这些数据从哪里来的话,就需要一层一层找父组件,最后才能找到数据,容易造成Prop逐级透传问题今天,我们将介绍另一......
  • 【Vue2-04】scoped样式
    scoped样式作用:让样式在局部生效,防止冲突写法:<stylescoped><template><div></div></template><script>exportdefault{}</script......
  • 【Vue2-02】ref属性
    ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:<h1ref="xxx">...</......
  • 【Vue2-03】props属性
    props配置功能:让组件接收外部传过来的数据数据传递:<Demoname="xxx">接收数据:方式一(只接收): props:['name'] 方式二(限制类型): props:{ name:String......
  • 【Vue2-01】Vue脚手架
    Vue脚手架一、单文件组件1.单文件组件定义单文件组件:*.vue文件,类似HTML格式的文件。Vue的单文件组件会将一个组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)封装在同......
  • 谈一谈 vuex 的运行机制
    Vuex提供数据(state)来驱动视图(vuecomponents),通过dispath派发actions,在其中可以做一些异步的操作,然后通过commit来提交mutations,最后mutations来更改state。 ......