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

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
天天进步20155 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html