在 index.vue 中可以使用 import 引入 children.vue,然后在父组件的 template 中使用子组件的标签引用子组件,在子组件的标签中使用 v-bind 绑定属性即可传值。
示例代码如下:
<!-- index.vue -->
<template>
<div>
<children v-bind:value="value"/>
</div>
</template>
<script>
import children from './children.vue'
export default {
components: {
children
},
data () {
return {
value: 'Hello'
}
}
}
</script>
<!-- children.vue -->
<template>
<div>{{ value }}</div>
</template>
<script>
export default {
props: ['value']
}
</script>
在这个例子中,父组件 index.vue 引入了子组件 children.vue,然后在父组件的 template 中使用 children 标签引用了子组件,并通过 v-bind 绑定了一个属性 value,然后在子组件的 script 中定义了一个 prop,这样就可以在子组件的 template 中使用 value 这个属性。