一. 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);
})
今天的文章父子组件传值方法_vue父子组件传值emit分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/71352.html