想了解vue组件传值有那些方法吗?大家请往下看,我会给大家总结一下,方便大家参考学习,共同进步。
一.父传子 子传父
我给大家总结下父传子,如何传递的。
父传递子如何传递
(1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量
(2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}
子传递父如何传递
(1)在父组件的子组件标签上自定义一个事件,然后调用需要的方法
(2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件,数据是以参数的形式进行传递的
代码如下
父组件代码
<template>
<div class="father">
<!-- 引入子组件 -->
<Child :Msg="Mesage"></Child>
</div>
</template>
<script>
//导入子组件文件位置
import Child from '@/components/Child.vue'
export default{
//添加子组件
components: {
Child
},
data(){
return{
Mesage:'我是父亲棒棒的'
}
}
}
</script>
<style scoped>
</style>
子组件代码
<template>
<div class="son">
<!-- 大家好,我是儿子组件 -->
<span>{{Msg}}</span>
</div>
</template>
<script>
export default{
props: [
'Msg'
],
methods: {
}
}
</script>
兄弟组件如何通信
(1)在src中新建一个Bus.js的文件,然后导出一个空的vue实例
(2)在传输数据的一方引入Bus.js 然后通过Bus. e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“事件名”,"参数")来来派发事件,数据是以 emit(“事件名”,"参数")来来派发事件,数据是以emit()的参数形式来传递
(3)在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})
在src中新建一个Bus.js的文件,然后导出一个空的vue实例
定义一个点击按钮,点击发送组件B里的数据
在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件,数据是以$emit()的参数形式来传递
<template>
<div class="A">
<button @click="add">A按钮</button>
</div>
</template>
<script>
import bus from "../bus/bus";
export default {
props: [],
data() {
return {
msg: "我是组件A的数据",
};
},
mounted() {},
methods: {
add() {
bus.$emit("add", this.msg);
},
},
};
</script>
在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})
<template>
<div class="B">
B组件
<h3>{{ data }}</h3>
</div>
</template>
<script>
import bus from "../bus/bus";
export default {
props: [],
data() {
return {
data: "",
};
},
mounted() {
bus.$on("add", (data) => {
this.data = data;
});
},
methods: {},
computed: {},
components: {},
watch: {},
};
</script>
二.vuex
通过store.commit将值传入vuex中,vuex通过mutations来接收
在store/index.js中写入以下代码:
state: {
userName:''
},
mutations: {
user(state,name){
state.userName=name;
},
}
在组件内写入以下代码:
通过store.commit(‘方法名’,‘参数’)
this.$store.commit("user", {
userName: res.user.userName,
id: res.user.user_id,
});
三.全局变量
在src中首先创建一个Global.js文件,文件中定义变量
全局变量创建最好是对象
exports.install = function (Vue) {
Vue.prototype.$allArray = {};
};
在src中的main.js文件中引入
导入并使用全局方法和变量
import Global from './Global';
Vue.use(Global);
四.ref/refs(父子组件通信)
(1)ref 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,
(2)可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
父组件
<template>
<div>
<button @click="sayHello">sayHello</button>
<child ref="childForRef"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
components: { child },
data () {
return {
childForRef: null,
}
},
mounted() {
this.childForRef = this.$refs.childForRef;
console.log(this.childForRef.name);
},
methods: {
sayHello() {
this.childForRef.sayHello()
}
}
}
</script>
子组件
<template>
<div>child 的内容</div>
</template>
<script>
export default {
data () {
return {
name: '我是 child',
}
},
methods: {
sayHello () {
console.log('hello');
alert('hello');
}
}
}
</script>
五.路由传参 query
就是在跳转路由是在url路径后面加上?=‘参数’来传递参数,然后可以用this.route.query.(参数)来接收就行或者监听路由来获取;
还可以在方法中用:
方法名(){
this.$router.push({ path: "/goods", query: { productID: list } });
}
在组件中用
mounted(){
//挂载时 接收一下
var id = this.$route.query.productID;
}