<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" 来进行属性绑定,确保了父组件数据的动态传递和更新。

相关推荐
lichong951几秒前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之video 的各种状态和生命周期调用说明
android·vue.js·macos
excel10 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手11 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360213 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep13 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo16 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒35 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用37 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc