![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：总结的不错, 继续加油
Collection
Collection
<body><!-- 挂载点 --><div id="app"></div><!-- 父组件的模板代码 --><template id="parent"><counter username="admin" email="496542445@qq.com" /></template><!-- 子组件的模板代码 --><template id="child"><p>UserName:{{username}}</p><p>UserEmail:{{email}}</p></template><script>const app = Vue.createApp({// 父组件template: `#parent`,});app.component("counter", {// 接受父组件的传过来的参数props: ["username", "email"],template: `#child`,});const vm = app.mount("#app");</script></body>
<body><!-- 挂载点 --><div id="app"><counter @review="review" /></div><template id="counter"><button @click="count++">点赞：+{{count}}</button><button @click="review()">评论</button></template><script>const app = Vue.createApp({methods: {review(count) {console.log(count);},},});app.component("counter", {template: `#counter`,data() {return {count: 0,};},methods: {review() {this.$emit("review", this.count);},},});const vm = app.mount("#app");// 1. 父-子：自定义属性// 2.子-父：自定义事件</script></body>
