Vue.js 子组件传参:使用 props 传递参数
在 Vue.js 中,可以使用 props 来传递参数给子组件。具体步骤如下:
1. 在父组件中定义需要传递的参数,例如:
<template>
<div>
<child-component :message='hello'></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
hello: 'Hello World!'
}
}
}
</script>
2. 在子组件中声明 props,例如:
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
3. 父组件中使用子组件时,通过 v-bind 绑定 props,例如:
<template>
<div>
<child-component :message='hello'></child-component>
</div>
</template>
这样,子组件就可以通过 props 来获取父组件传递的参数了。
原文地址: https://www.cveoy.top/t/topic/luCS 著作权归作者所有。请勿转载和采集!