组件传递数据_Props
组件与组件之间不是完全独立的,而是有交集的,那就是组件与组件之间是可以传递数据的
传递数据的解决方案就是props
我们新增2个vue文件Parent.vue和Child.vue,把Child绑定到Parent里,传递方法如下:
Parent.vue
<script>
import Child from './Child.vue';
export default {
data() {
return {
}
},
components: {
Child
}
}
</script>
<template>
<h3>Parent</h3>
<Child title="Parent数据" demo="测试"/>
</template>
Child.vue
<script>
export default {
data() {
return {
}
},
props:['title','demo']
}
</script>
<template>
<h3>Child</h3>
<p>{{ title }}</p>
<p>{{ demo }}</p>
</template>
动态传递数据
Parent.vue
<script>
import Child from './Child.vue';
export default {
data() {
return {
message: 'Parent数据'
}
},
components: {
Child
}
}
</script>
<template>
<h3>Parent</h3>
<Child :title="message"/>
</template>
注意事项:
props传递数据:只能从父级传递到子级,不能反其道而行
组件传递多种数据类型
通过props传递数据,不仅可以传递字符串类型的数据,还可以是其他类型,例如:数字、对象、数组等
但实际上任何类型的值都可以作为props的值被传递