vue中的一个子组件如何在父组件中调动另一个子组件中的方法

第一:在子组件通过用绑定事件,来到达父元素(主要通过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
     }

  }

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浩星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值