收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>声明组件与子组件,以及他们之间的通信方式</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head><body><!-- 挂载点 --><div id="app"><!-- 组件挂载 --><greeting /></div></body><script>// 应用实例const app = Vue.createApp({});app.component("greeting", {// html模版template: `<h2>Hello, {{uname}}</h2><button @click='setLike'>点赞 + {{count}}</button><!-- 命名规则: 小驼 -> 肉串 --><my-award v-if='count >=10' />`,// 数据data() {return {uname: "李老师",count: 0,};},// 方法methods: {setLike() {this.count++;},},// 声明子组件(复数属性)components: {// 奖励组件myAward: {// 只要是组件，可以写模版template: `<p>实在太受欢迎了`,data() {return {};},components: {},},},});// 根组件实例 (vue应用与挂载点绑定)const vm = app.mount("#app");</script></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
