大家好,又见面了,我是你们的朋友全栈君。
一. 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);
})
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145622.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...