<template>
<div>
<ChildComponent :data="myData" />
</div>
</template>
<script>
export default {
data() {
return {
myData: {
value: 'Hello, World!',
type: 'string'
}
};
}
};
</script>
<script>
// ChildComponent.vue
export default {
props: {
data: {
type: [String, Object],
required: true,
validator: function(value) {
if (typeof value === 'string' || (typeof value === 'object' && value !== null)) {
return true;
}
console.error('Invalid prop: "data" must be a string or non-null object.');
return false;
}
}
},
template: `
<div>
<p>{{ data.value }}</p>
<p>Type: {{ data.type }}</p>
</div>
`
};
</script>