Vue 语法糖 .sync

最新推荐文章于 2024-04-12 10:47:29 发布

Skyblue____

最新推荐文章于 2024-04-12 10:47:29 发布

阅读量87

点赞数

分类专栏： JS学习

本文链接：https://blog.csdn.net/weixin_44782100/article/details/117511545

版权

JS学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<template>
  <div style='border: 3px solid red;padding: 10px;'>
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money = "total = $event"  />
    <!-- $event 保存了$emit 传入的参数money-100 -->
  </div>
</template>


<script>
import Vue from "vue"

Vue.component('Child', {
  template: `<div style='border: 3px solid green'>
                {{money}}
            <button @click="$emit('update:money', money-100)" >
            <span>花钱</span>
            </button>
            </div>`,
  props: ["money"]
})

export default {
  data() {
    return { total: 10000 };
  },
}
</script>