vue3 非setup自定义组件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue3 非setup自定义组件</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>  
</head>
<body style="padding:10px;">
    <div id="app" > 
      
      <demo v-model:color="parentColor" :fontSize="15" />
    </div>
 <script>
 const app = {
  data() {
    return {
      parentColor: "#666",
    };
  },
  //注册demo组件
  components: {
    demo: {
      template:
        ' <div class="itxst"><p :style="{ color: color,fontSize:fontSize+\'px\' }">我是子组件</p><input class="btn" @click="update" type="button" value="修改颜色" /> </div>',
      props: {
        fontSize: {
          type: Number,
          default: 14,
        },
        color: {
          type: String,
          default: "#000",
        },
      },
      methods: {
        //修改属性的值, <demo  v-model:color="parentColor" :fontSize="15"/>
        update: function () {
          this.$emit("update:color", "red");
          //父组件fontSize没有使用v-model,所以无法修改fontSize值
          this.$emit("update:fontSize", "20");
        },
      },
    },
  },
};
Vue.createApp(app).mount("#app");     
</script>
 <style> 
 </style>
</body>
</html>