对象传值简写的问题
来源:1-4 单项数据流的理解
晓之蛇
2022-08-22 10:59:52
老师您好,
父组件中使用v-bind绑定的是一个对象的话,是写的 v-bind='params'
如果写成 v-bind:params='params' 页面并没有渲染结果,代码如下:
const app = Vue.createApp({
data() {
return {
params: {
a: 10,
b: 20,
c: 'ab',
d: 'cd'
}
}
},
// v-bind绑定数据与对象绑定,v-bind:params='params'这种写法没有渲染出数据
template: `<demo v-bind:params='params' />`
});
app.component('demo', {
props: ['a', 'b', 'c', 'd'],
template: `<div>{{a}} - {{b}} - {{c}} - {{d}}</div>`
})
const vm = app.mount('#root');我的理解是:
当data()返回的数据不是对象时,绑定数据写为: v-bind:params='params'
当data()返回的数据是对象时,绑定数据写为: v-bind='params'
请老师看下我的说法是否正确?
1回答
同学你好,理解有误,与data中返回的数据格式无关,而是与v-bind的写法有关。可以参考如下解析理解:
1、v-bind="params"这种写法,相当于将params展开添加绑定,类似于下面这种写法,示例:

所以可以在子组件中使用props接收a、b、c和d的值并展示到页面。
2、如果是v-bind:params="params"这种写法,相当于定义了props名为params,并绑定值为params,子组件中要在props中声明params然后才能使用,示例:

祝学习愉快~
相似问题