<MySon car=“宝马“ :money=“money“></MySon>有没有冒号

为什么car="宝马"没有: 但是 :money="money"就有:

<script setup>
import {ref} from 'vue'
import MySon from '@/components/MySon.vue'

const money = ref(100)
</script>


<template>
    <h3>father</h3>
 <MySon car="宝马" :money="money"></MySon>
</template>

<style></style>

在 Vue 中,使用 :v-bind 来进行属性绑定,将父组件的数据传递给子组件。而不使用 :v-bind,则将属性视为字符串字面量。

在你提供的代码中,car="宝马" 没有使用 :v-bind,所以 car 属性被视为字符串字面量,传递给子组件的是一个字符串值 “宝马”。这意味着子组件 MySon 中的 car 属性将始终是字符串 “宝马”,无论父组件的数据如何变化。

:money="money" 使用了 :v-bind,表示将父组件的 money 数据绑定到子组件的 money 属性。这样,当父组件中的 money 数据发生变化时,子组件中的 money 属性也会相应地更新。

因此,使用 :v-bind 可以实现动态绑定,将父组件的数据传递给子组件,并在父组件数据变化时自动更新子组件的属性。而不使用 :v-bind,则将属性视为静态字符串,不会随着父组件数据的变化而更新。

正确的示例代码应该是:






在上述代码中,使用 :car="car":money="money" 来进行属性绑定,确保了父组件数据的动态传递和更新。

你可能感兴趣的:(javascript,vue.js,前端)