vue子组件向父组件传值

***做项目时用到，这里记录一下。子组件向父组件传值有三种方式***

1、在父组件里import子组件了，子组件可以通过this.$parent.method()-方法名直接调用

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      father() {
        console.log('传值测试');
      }
    }
  };
</script>

子组件

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

2、在子组件用$emit触发时间，父组件监听

父组件

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

子组件

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

3、是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件

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

子组件

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