组件通讯
在子组件中调用父组件的方法
方法一:不推荐使用 不易维护 X
子组件.vue
js
<script>
export default {
methods: {
test() {
this.$parent.test_father('NO!~');
},
}
}
</script>
<script>
export default {
methods: {
test() {
this.$parent.test_father('NO!~');
},
}
}
</script>
父组件.vue
js
<script>
export default {
methods: {
test_father(val) {
console.log(val)
},
}
}
</script>
<script>
export default {
methods: {
test_father(val) {
console.log(val)
},
}
}
</script>
在父组件中调用子组件的方法
使用ref
父组件.vue
js
<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
js
export default {
methods: {
childClick(params) {
console.log('我是子组件的方法,接收到的参数: ',params);
},
},
}
export default {
methods: {
childClick(params) {
console.log('我是子组件的方法,接收到的参数: ',params);
},
},
}