vue方法传值到data_vue组件传值的几种方式

1、bus总线

//定义bus插件

//在util文件夹下定义bus.js

import Vue from 'vue';

let install = (vue) => {

vue.prototype.bus = new Vue();

}

export default install;

1.1、用到bus总线的地方，兄弟组件传值(父子组件也可以使用bus总线，但他使用自身的this.$emit\this.$on,更方便，相当于bus总线的变种)

//在main.js中引入bus，方便在全局使用:

1.2、接下来就可以在组件A和组件B中使用

//组件A接受组件B传递来的数据

created() {

this.bus.$on("hello", (data) => {

console.log(data);

});

},

//组件B传递

传递参数

export default{

methods:{

handle(){

this.bus.$emit("hello", { obj: 123 });

}

}

}

2、路由传参:

1、命名路由传参

this.$router.push({ name: 'user', params: { user: 'nickname' }});

//页面接受

this.$route.params

2、查询参数传参

this.$router.push({path: '/user', query: {user: "nickname"}});

//页面接受

this.$route.query

3、父子组件传参

//子组件

this.$emit("update",123);

//父组件触发

//children代表子组件

export default{

methods:{

update(data){

console.log(data);

}

}

}

4、vuex全局使用参数

//新建store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

},

mutations: {

},

actions: {

},

modules: {

}

})

//main.js中引入，就可以全局使用state

import store from './store'

new Vue({

store,

render: h => h(App)

}).$mount('#app');