父子组件的第一个定义是,当前组件中的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 ) )。