大家好，又见面了，我是你们的朋友全栈君。
一. ref传值
1. 子组件(<Invitation>)定义一个变量visible
2 . 父组件使用ref接收
<Invitation ref="dialog" />3. 父组件可修改值(visible是子组件的一个变量)
this.$refs.dialog.visible=true;二. 父传子
1. 父组件使用v-bind绑定一个变量variable(v-bind:变量名=”值”)
<Invitation v-bind:visible="dialogVisible" @getData="getdata" />2. 子组件用props接收（与created同级）
props: ["visible"]三. 子传父
1. 子组件使用this.$emit绑定一个事件和值
this.$emit("getData", this.data1);2. 父组件使用@子组件绑定事件=新方法名
<Invitation v-bind:visible="dialogVisible" @getData="getdata" />3. 父组件定义新方法名接收值
getdata(val) {
console.log(val);
},四. VueX传值
1. 建立或者使用已有的store文件夹下面的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userid:'', // 最后获取的变量名
usertype:'',
},
getters: { // 一般不用
getinfo(state){
return state.userid;
}
},
mutations: { // getUserid就是值来源处定义的方法，id是随便定义的一个变量去接收对应的值
getUserid(state,id){
state.userid = id;
},
},
actions: {
},
modules: {
}
})2. main.js里面引入store文件夹
// 默认已经引入
import store from './store'
new Vue({
store,
}).$mount('#app')3. 设置变量的值
this.$store.commit("getUserid", this.userid);
// getUserid表示方法名，在第一步调用;
// this.userid表示需要传递的值4. 调用已经设置的值
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["userid"]), // userid是store/index.js的state里面定义的变量名
},
created() {
console.log(111, this.userid);
},
};
</script>五. bus事件总线传值（多用于兄弟组件传值）
1. main.js中创建一个事件总线
// 建立中转站
let bus = new Vue();
Vue.prototype.bus = bus;2. 使用emit绑定一个方法和值
this.bus.$emit("getData", this.data1);3. 获取值
this.bus.$on("getData",function(val){
console.log(val);
})版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/145622.html原文链接：https://javaforall.net
