组件
<!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@next"></script></head><body> <div class="app"> <!-- vue 指令 本质 是 自定义属性 --> <!-- <button-counter></button-counter> 必须这种格式 --> <button-counter></button-counter> <button-counter></button-counter> </div> <template id="counter" class="uo"> <button @click="count++">点赞: {{count}}</button> </template> <hr> <script> const app = Vue.createApp(); // 注册组件两种方式 // 1、全局组件 注册在vue实例上 app.component('button-counter', { // 可以简写 将 <button @click ="count++">点赞：{{count}}</button> 放到html 的body 实现代码复用 // 不能用 class 只能用 id template: '#counter', // template: '.uo', data() { return { count:0, } }, }).mount('.app'); </script></body></html>
组件
<!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@next"></script></head><body> <div class="app"> <!-- vue 指令 本质 是 自定义属性 --> <!-- <button-counter></button-counter> 必须这种格式 --> <button-counter></button-counter> <button-counter></button-counter> </div> <template id="counter" class="uo"> <button @click="count++">点赞: {{count}}</button> </template> <hr> <script> // 2、局部组件 注册在vue实例的选项中 const app = Vue.createApp({ components: { // 可以使用规范的驼峰命名法, 不过在html中要转为蛇形 // button-counter (不能用) buttonCounter buttonCounter : { template: '#counter', data() { return { count: 0, }; }, }, }, }); app.mount('.app'); </script></body></html>
父向子组件传参
<!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@next"></script></head><body> <div class="app"> <!-- vue 指令 本质 是 自定义属性 --> <!-- <button-counter></button-counter> 必须这种格式 --> <!-- 使用自定义属性将父组 件参数传入到子组件中 --> <button-counter username = 'admin' email = '123@qq.com'></button-counter> </div> <template id="counter" class="uo"> <p>用户：{{username}}</p> <p>邮箱：{{email}}</p> </template><script> const app = Vue.createApp(); app.component('button-counter', { template: '#counter', // props 属性 用数组来而棘手父组件传入的自定义属性作为载体的参数 props:['username','email'], }); app.mount('.app');</script></body></html>
子向父组件传参：监听了组件事件
<!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@next"></script></head><body> <div class="app"> <!-- vue 指令 本质 是 自定义属性 --> <!-- <button-counter></button-counter> 必须这种格式 --> <!-- 使用自定义属性将父组 件参数传入到子组件中 --> <button-counter @review-count="review"></button-counter> </div> <template id="counter" class="uo"> <button @click="count++">点赞: {{count}}</button> <!-- 基础发布订阅 $emit（) 固定写法 $emit（自定义事件的名称，像父组件传递的参数（可选）) --> <button @click="$emit('reviewCount',this.count)">评价</button> </template><script> const app = Vue.createApp({ methods: { review (count){ console.log(count); if(count >=10) alert('你们好') }, }, }); app.component('button-counter', { template: '#counter', data() { return { count: 0, }; }, }); app.mount('.app');</script></body></html>
