组件通讯

在子组件中调用父组件的方法

方法一:不推荐使用 不易维护 X

子组件.vue

<script>
	export default {
		methods: {
      test() {
        this.$parent.test_father('NO!~');
      },
    }
}
</script>

<script>
	export default {
		methods: {
      test() {
        this.$parent.test_father('NO!~');
      },
    }
}
</script>

父组件.vue

<script>
	export default {
		methods: {
      test_father(val) {
        console.log(val)
      },
    }
}
</script>

<script>
	export default {
		methods: {
      test_father(val) {
        console.log(val)
      },
    }
}
</script>

在父组件中调用子组件的方法

使用ref

父组件.vue

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/></Child>
    </div>
</template>

<script>
import Child from './child'

export default {
    methods: {
        handleClick() {
              this.$refs.child.childClick('测试参数');
        },
    },
}
</script>

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/></Child>
    </div>
</template>

<script>
import Child from './child'

export default {
    methods: {
        handleClick() {
              this.$refs.child.childClick('测试参数');
        },
    },
}
</script>

子组件.vue

export default {
  methods: {
    childClick(params) {
      console.log('我是子组件的方法，接收到的参数： ',params);
    },
  },
}

export default {
  methods: {
    childClick(params) {
      console.log('我是子组件的方法，接收到的参数： ',params);
    },
  },
}