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

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

js 复制代码
<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,则将属性视为静态字符串,不会随着父组件数据的变化而更新。

正确的示例代码应该是:

vue 复制代码
<template>
  <h3>father</h3>
  <MySon :car="car" :money="money"></MySon>
</template>

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

export default {
  components: {
    MySon
  },
  setup() {
    const car = '宝马';
    const money = ref(100);

    return {
      car,
      money
    };
  }
};
</script>

<style></style>

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

相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python