简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Vue注册组件的二种方式与组件之间的通信方式
Blogger Information
Blog 36
fans 1
comment 0
visits 26099
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue注册组件的二种方式与组件之间的通信方式
早晨
Original
423 people have browsed it

全局组件：提前声明，在任意子组件中均可直接使用该组件，不需要在进行引入声明。
局部组件：就是指只有引入的局部才可以使用这个组件，如果没有引入不可以使用。

实例演示代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>组件注册</title>
  8.     <script src="https://unpkg.com/vue@next"></script>
  9.   </head>
  10.   <body>
  11.     <!-- 全局组件 -->
  12.     <div class="allapp">
  13.       <button-counter></button-counter>
  14.     </div>
  15.     <template id="love">
  16.       <button @click="love++">(全局组件)喜欢: {{love}}</button>
  17.     </template>
  18.     <hr />
  19.     <!-- 局部组件 -->
  20.     <div class="app">
  21.       <button-counter></button-counter>
  22.     </div>
  23.     <template #="love">
  24.       <button @click="love++">(局部组件)喜欢: {{love}}</button>
  25.     </template>
  26.     <hr />
  27.     <!-- 子组件传参的通信方式 -->
  28.     <div class="tel">
  29.       <button-counter tel="13000000000" add="北京"></button-counter>
  30.     </div>
  31.     <template id="counter">
  32.       <p>手机: {{tel}}</p>
  33.       <p>地址: {{add}}</p>
  34.     </template>
  35.     <hr />
  36.     <!-- 父组件传参的通信方式 -->
  37.     <div class="alltel">
  38.       <button-counter @review-count="review"></button-counter>
  39.     </div>
  40.     <template id="alltel">
  41.       <button @click="love++">(父组件传参)喜欢: {{love}}</button>
  42.       <button @click="$emit('reviewCount', this.love)">评价</button>
  43.     </template>
  44.     <script>
  45.       const allapp = Vue.createApp();
  46.       // 1. 全局组件
  47.       allapp
  48.         .component("button-counter", {
  49.           template: "#love",
  50.           data() {
  51.             return {
  52.               love: 0,
  53.             };
  54.           },
  55.         })
  56.         .mount(".allapp");
  57.       // 2. 局部组件
  58.       const app = Vue.createApp({
  59.         components: {
  60.           buttonCounter: {
  61.             template: "#love",
  62.             data() {
  63.               return {
  64.                 love: 0,
  65.               };
  66.             },
  67.           },
  68.         },
  69.       }).mount(".app");
  70.       //   子组件传参
  71.       const tel = Vue.createApp();
  72.       tel
  73.         .component("button-counter", {
  74.           props: ["tel", "add"],
  75.           template: "#counter",
  76.         })
  77.         .mount(".tel");
  78.       //   父组件传参
  79.       const alltel = Vue.createApp({
  80.         methods: {
  81.           review(love) {
  82.             console.log(love);
  83.             if (love >= 10) alert("大家吃了吗?");
  84.           },
  85.         },
  86.       });
  87.       alltel
  88.         .component("button-counter", {
  89.           template: "#alltel",
  90.           data() {
  91.             return {
  92.               love: 0,
  93.             };
  94.           },
  95.         })
  96.         .mount(".alltel");
  97.     </script>
  98.   </body>
  99. </html>

运行效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！