关于父子组件那点事

 

父组件通过prop向子组件传递数据，父组件调用子组件方法

父组件通过ref直接调用子组件的方法；

Html部分
<div>
　　<Button @click="handleClick">点击调用子组件方法</Button>
    <Child :title="title" ref="child"></Child>
</div>

Js部分

<script>

import Child form "Child.vue";//引入组件方法一

 

export default {

componentsL{//注册组件
  　　Child 
　　　//或者
　　  Child:()=>import("Child.vue")//引入组件方法二，不需要上面的

},

methods: {
　　handleClick() {
　　
　　　　　　this.$refs.child.sing();//方法一

　　　　　　　this.$refs.child.$emit("childmethod")    //方法二：子组件$on中的名字

    },

  },

}

</script>

子组件

<div>
    <div>{{title}}</div>
</div>


js部分

<script>

export default {

 props:{
  title: {
      type: String,
      default: ‘’,
    },  
},

　　mounted() {

        this.$nextTick(function() {

            this.$on('childmethods', function() {

                console.log('我是子组件方法');

            });

        });

     },

  methods: {

    sing() {

      console.log('我是子组件的方法');

    },

  },

};

</script>

 

 

 

子组件调用父组件方法

方法一：父组件把方法传入子组件中，子组件用props接收，再调用这个方法。

父组件代码：

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import { child } from 'components/child.vue';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件代码

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        this.fatherMethod();
      }
    }
  };
</script>

2、

方法二在子组件里用$emit向父组件触发一个事件，父组件监听这个事件。

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import { child } from 'components/child.vue';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

方法三：在子组件中通过this.$parent.event来调用父组件的方法。

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import { child } from 'components/child.vue';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>