对象传值简写的问题
来源: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然后才能使用,示例:
祝学习愉快~
相似问题