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

  }

 

Logo

前往低代码交流专区

更多推荐