Vue.js 组件之间传值
总结:父传子:父: 引入子组件 <child :方法名="传入的值"></child> 子: 在props中接收["方法名"] 子传父:子: this.$emit('子方法名',传的值);
总结:父传子:父: 引入子组件 <child :方法名="传入的值"></child> 子: 在props中接收["方法名"]
子传父:子: this.$emit('子方法名',传的值); 父 在html中 <child @子方法名="子方法名"> </child>
兄弟传1: 传: 引入bus.js文件 bus.$emit('传方法名',传的值); 接: 在mounted中 bus.$on("传方法名", (传的值) => { });
兄弟传2:传:为了方便我们的操作我们就不用引入bus.js,而是直接的调用 this.$root.$emit("传方法名", 传的值);
接: this.$root.$off('传方法名'); this.$root.$on('传方法名', function (传的值) { });
这里的 this.$root.$off('传方法名'); 就是为了每一次的进入的时候都要关闭一下,
一父件引入子件(父组件中)
1、子组件的引入步骤
import 子组件名 form '子组件所在路径'
2、当引入后我们在export default{进行引用}
compents:{
子组件名,
}
import { mapGetters, mapActions, mapMutations } from "vuex";
import mxdList from "../../components/mxd_list.vue";//这个是自组件的引入
export default {
name: "apply_list",
//子组件的引入
components: {
mxdList
},
data() {
return {
}
3、在页面中展示我们的组件
<mxdList ref="mxdCommpont" :activename="active" :keyword="djlxmxd"></mxdList>
也可以写成这样的
<mxd_list ref="mxdCommpont" :activename="active" :keyword="djlxmxd"></mxd_list>
4、给子组件传值
注意传入的值是等号后面的值,等号后面的值需要在data中定义不然会报错,定义要传送的值用:
二、子组件中接收父组件的值
1、当父组件给子组件传值的时候,我们就要在props中接收值,
data:{
},
props: {
keyword:String,//前面是接收的值:值的类型(可以是Boolean,Sring等值)
taskname:String,
activename:String,
},
也可以写成这样
data:{
},
props: [
'keyword',
'taskname',
'activename',
],
三、子组件往父组件传值
1、首先引入bus.js
import Bus from './bus.js'
2、在子组件的methods中传一个方法
方法名(){
Bus..$emit('传给父级的名', 实际要传的值);//也就是后面的值给前面的值,在父级中接收前面的值
}
//搜索
handleQuery() {
Bus.$emit('handleQuery', queryInfo);
}
3、在组件中接收子组件传来的方法可以在mount中接收
bus.$on('传给父级的名',(任意名)=>{
父组件用到的值= 任意名;
});
bus.$on('handleQuery',(name)=>{
//用子组件传过来的值赋值给我们使用的值
this.instName = name;
});
四、父组件调用子组件的方法(一)
1、子组件中在methods中定义一个方法
childff(){
console.log("子组件传的值")
}
2、父组件调用子组件的方法
<template>
<child ref='sssss' :activename="active" :keyword="djlxmxd"></child>
</template>
import child from "../child";//这个是自组件的引入
export default {
name: "child",
//子组件的引入
components: {
child
},
data() {
return {
}
methods:{
click(){
this.$refs.sssss.childff();
}
}
五、子组件给父组件传值或父组件调用子组件的方法(二)
1、子组件中定义方法
handleQuery() {
this.$emit('handleQuery','1212');//这个是子组件要传入父组件的方法
}
2、在父组件中用
当我们父组件调用子组件的时候,用@子组件定义的方法名:'父组件'
<templete>
<mxd_list @handleQuery="mxdCommpont" :activename="active" :keyword="djlxmxd">
</mxd_list>
<xd_list ref='splist' :activename="active" :keyword="djlxmxd"></xd_list>
</templete>
methods:{
mxdCommpont(val){
console.log(val);//1212
this.$refs.splist.getlist()
}
}
更多推荐
所有评论(0)