Vue组件及通信方式
一. 声明组件与子组件,以及他们之间的通信方式
一）. 父-子：自定义属性
1.代码
<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>
2.实现效果图
二）.子-父：自定义事件
1.代码
<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>
2.实现的效果图
