总结:父传子:父:     引入子组件    <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()
      }
}

 

Logo

前往低代码交流专区

更多推荐