首页 > 编程知识 正文

vue常用组件,vue组件的通讯

时间:2023-05-05 00:10:28 阅读:173401 作者:2710

父子组件的第一个定义是,当前组件中的import进入其他组件,用定制标签接收,并在当前组件的component中注册该标签,当前组件就会成为父组件,从而获取

第二,定义根中包含children的组件,并在页面中以router-view/router-view格式使用该组件也是父组件,当前组件是router-view

父组件与子组件绑定到props,父组件绑定到值为:name='的组件,子组件由props函数接收name,设置变量类型,完成后可以直接使用。

父操作数:父调用符的属性和方法首先在ref中子组件中注册引用信息,然后在父组件中直接在$refs中调用子组件中定义的属性和方法。

使用父组件:子组件调用父组件的属性和方法,首先用@medium='fatherMethod '将父组件的方法挂载到子组件中。 然后,您可以在子组件中调用this.$emit(medium )、item的父组件方法来传递值,同时直接操纵父组件中的变量。 还有更简单的方法。 this.$Parent.fathermethod(item ) )。

同级组件通信可以通过$emit和$refs的组合在同级组件之间进行交叉引用和方法调用。 同级a可以通过$emit将值传递给父代或父代方法,而父代通过$refs将值传递给b或b方法,使a将值传递给b或b方法。

利用中央事件总线,在外部创建新的bus.js。 importvuefrom ' vue ' exportdefaultnewvue; 在两个兄弟组件中分别导入bus.js。 import bus from './bus.js '; 在哥组件的方法主体中使用bus.$emit定义send事件。 button @click='sendMsg '发送数据/buttonsendMsg () bus.$Emit,this.a ) }在弟弟组件的加载函数中通过bus.$on侦听此事件。 created () bus.$on )、function (a ) a )和console.log ); },也可以将总线直接放置在main.js中的vue实例上。 必须在bus之前加上this.$root。 newvue(El:(#app )、router、template : (app/)、components : (app ) )、 data: ) bus3360newvue ) }使用} Vue.prototype在main.js中挂载全局对象,然后使用Vue.prototype.$EventBus=new Vue () )将全局对象挂载到定义监听事件this.$eventbus.$on ) ' switchtch )直接调用此方法的this.$eventbus.$Emit(switchtab ',1 )是session sssion 在b页的显示函数中,判断是否存在此key,如果存在,则执行相应的操作删除key。 基于vuex的状态管理方法

一.安装vuex

NPMinstallvuex----save2,新的store.js部署vue和vuex

importvuefrom ' vue ' importvuexfrom ' vuex ' vuex.use (vuex ) const state={ name 3360 ' LHD zxc ' } exportdefaultnewvuex }

import Vue from 'vue '; import App from './App '; 导入路由器从'./router '; 导入存储来自'./store '; newvue(El:(#app )、router、store、components: ) app )、template : (app/)、); 四.通过this.$store.state访问并赋值

this.$store.state.name='111 '; console.log (this.$ store.state.name ) )。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。