对象传值简写的问题

来源: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回答

好帮手慕慕子

2022-08-22

同学你好,理解有误,与data中返回的数据格式无关,而是与v-bind的写法有关。可以参考如下解析理解:

1、v-bind="params"这种写法,相当于将params展开添加绑定,类似于下面这种写法,示例:

https://img.mukewang.com/climg/6302fd2c0930315621900376.jpg

所以可以在子组件中使用props接收a、b、c和d的值并展示到页面。

2、如果是v-bind:params="params"这种写法,相当于定义了props名为params,并绑定值为params,子组件中要在props中声明params然后才能使用,示例:

https://img.mukewang.com/climg/6302fde20989e33220201046.jpg

祝学习愉快~

0

0 学习 · 17877 问题

查看课程