vue父级调用子组件
时间: 2023-11-24 09:07:22 浏览: 142
vue 父组件中调用子组件函数的方法
5星 · 资源好评率100%
Vue父组件调用子组件有两种方式:通过props传递数据和通过ref直接调用子组件的方法。
通过props传递数据:
1.在父组件中引入子组件并注册
```vue
<template>
<div>
<child :message="msg"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
msg: 'Hello World!'
}
}
}
</script>
```
2.在子组件中通过props接收数据
```vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
```
通过ref直接调用子组件的方法:
1.在父组件中引入子组件并注册
```vue
<template>
<div>
<button @click="handleClick">点击调用子组件方法</button>
<child ref="child"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
methods: {
handleClick() {
this.$refs.child.sing()
}
}
}
</script>
```
2.在子组件中定义方法
```vue
<template>
<div>
我是子组件
</div>
</template>
<script>
export default {
methods: {
sing() {
console.log('我是子组件的方法')
}
}
}
</script>
```
阅读全文