vue中的一个子组件如何在父组件中调动另一个子组件中的方法
第一:在子组件通过用绑定事件,来到达父元素(主要通过this.$emit来和父组件达成联系)/*******主要原理跟vuex差不多********/1、template部分代码<template><header><div class="header_left" @click="showcity()
·
第一:在子组件通过用绑定事件,来到达父元素(主要通过this.$emit来和父组件达成联系)
/*******主要原理跟vuex差不多********/
1、template部分代码
<template>
<header>
<div class="header_left" @click="showcity()">西安<i></i></div>
<h1>鲜城</h1>
<a href="#" class="addSidebar" @click="sousoTit()"><img src="../../assets/images/commons/sousu.png"/></a>
<!-- <router-link class="addSidebar" to="/souso"><img src="../../assets/images/commons/sousu.png"/></router-link> -->
</header>
</template>
@click="sousoTit()"><img src="../../assets/images/commons/sousu.png"/></a>
<!-- <router-link class="addSidebar" to="/souso"><img src="../../assets/images/commons/sousu.png"/></router-link> -->
</header>
</template>
2、javascript部分
created(){
this.showcity();
this.sousoTit(); //注册sousoTit方法
},
methods: {
showcity(){
this.$emit("myevent")
},
sousoTit(){
this.$emit("xxx")
}//通过 $emit实现事件绑定和父组件达成联系
}
this.sousoTit(); //注册sousoTit方法
},
methods: {
showcity(){
this.$emit("myevent")
},
sousoTit(){
this.$emit("xxx")
}//通过 $emit实现事件绑定和父组件达成联系
}
第二、在父元素接收子元素的事件,并控制另一个事件的方法(主要是自定义事件来回应子组件的联系,并通过ref方法来控制另一个子组件的方法)
1、template部分代码
<template>
<div class="body">
<project-header @myevent="dianJ()" @xxx="dianJS()"></project-header> //在父组件的子组件处接收事件
<project-me-con></project-me-con>
<project-footer></project-footer>
<city-tan class="citytit"></city-tan>
<sou-so ref="soutit" class="SouSutit"></sou-so> //在另一个子组件处添加 ref="名字"
</div>
</template>
@xxx="dianJS()"></project-header> //在父组件的子组件处接收事件
<project-me-con></project-me-con>
<project-footer></project-footer>
<city-tan class="citytit"></city-tan>
<sou-so ref="soutit" class="SouSutit"></sou-so> //在另一个子组件处添加 ref="名字"
</div>
</template>
2、javasript部分代码
<script type='text/ecmascript-6'>
import "../assets/js/jquery-1.8.3.min.js"
import ProjectHeader from "../components/commons/ProjectHeader"//引入第一个组件
import ProjectFooter from "../components/commons/ProjectFooter"
import ProjectMeCon from "./ProjectMeCon"
import CityTan from "../components/commons/CityTan"
import SouSo from "../components/commons/SouSo"引入第二个组件
export default {
data () {
return {
};
},
components: {
ProjectMeCon,
ProjectHeader,
ProjectFooter,
CityTan,
SouSo
},
created(){
this.dianJ;
this.dianJS;
},
methods: {
dianJ(){
$(".citytit").animate({"top":"0"},200);
},
dianJS(){
let xx = this.$refs.soutit;
if(xx != undefined){
this.$refs.soutit.send();
}
} //用this.$refs.名字+另一个子组件里需要我们控制的方法
}
}
</script>
import ProjectHeader from "../components/commons/ProjectHeader"//引入第一个组件
import ProjectFooter from "../components/commons/ProjectFooter"
import ProjectMeCon from "./ProjectMeCon"
import CityTan from "../components/commons/CityTan"
import SouSo from "../components/commons/SouSo"引入第二个组件
export default {
data () {
return {
};
},
components: {
ProjectMeCon,
ProjectHeader,
ProjectFooter,
CityTan,
SouSo
},
created(){
this.dianJ;
this.dianJS;
},
methods: {
dianJ(){
$(".citytit").animate({"top":"0"},200);
},
dianJS(){
let xx = this.$refs.soutit;
if(xx != undefined){
this.$refs.soutit.send();
}
} //用this.$refs.名字+另一个子组件里需要我们控制的方法
}
}
</script>
第三、在另一个组件中直接是方法,不用写啥,主要是父组件部分用ref方法
created(){
this.send //子组件要被父组件调动的方法
},
components: {},
methods: {
send(){
this.quxiaoTit = ! this.quxiaoTit
}
}
this.send //子组件要被父组件调动的方法
},
components: {},
methods: {
send(){
this.quxiaoTit = ! this.quxiaoTit
}
}
更多推荐
已为社区贡献102条内容
所有评论(0)