Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示组件注册的二种方式
Blogger Information
Blog 62
fans 3
comment 1
visits 29549
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
实例演示组件注册的二种方式
kiraseo_wwwkiraercom
Original
385 people have browsed it

组件注册的两种写法（根据工作需要选择适合的组件注册写法）

代码如下

全局组件写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <div class="app">
  12.         <button-click></button-click>
  13.     </div>
  14.     <template id="mbzj">
  15.         <button @click="click++">点击次数: {{click}}</button>
  16.       </template>
  17. </body>
  18. <script>
  19.         //全局注册写法
  20.  const app = Vue.createApp();
  21.          app.component('button-click', {
  22.           template: '#mbzj',
  23.           data() {
  24.             return {
  25.                 click: '0',
  26.             };
  27.           },
  28.         });
  29. </script>
  30. </html>

局部组件注册写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <div class="app">
  12.         <button-click></button-click>
  13.     </div>
  14.     <template id="mbzj">
  15.         <button @click="click++">点击次数: {{click}}</button>
  16.       </template>
  17. </body>
  18. <script>
  19.         //局部组件写法
  20.         const app = Vue.createApp({
  21.             //内置组件 component
  22.         components: {
  23.             buttonClick: {
  24.             template: '#mbzj',
  25.             data() {
  26.               return {
  27.                 click: 0,
  28.               };
  29.             },
  30.           },
  31.         },
  32.       });
  33.       app.mount('.app');
  34. </script>
  35. </html>

效果

#

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <div class="app">
  12.         <button-counter name="小明"  fraction="75"></button-counter>
  13.         <button-counter name="小问"  fraction="95"></button-counter>
  14.         <button-counter name="小王"  fraction="65"></button-counter>
  15.     </div>
  16.     <template id="counter">
  17.         <fieldset>  
  18.         <p>学生: {{name}}</p>
  19.         <p>学分: {{fraction}}</p>
  20.         <p>评价：
  21.             <span v-if=" fraction>=90 ">优</span>
  22.             <span v-else-if="  fraction>=80 && fraction<90">良</span>
  23.             <span v-else-if="  fraction>=70 && fraction< 80">中</span>
  24.             <span v-else>及格</span>
  25.         </p>
  26.       </fieldset>
  27.       </template>
  28. </body>
  29. <script>
  30.       const app = Vue.createApp( );
  31.       app.component('button-counter', {
  32.         // props: 用数组接收父组件传入的自定义属性做为载体的参数
  33.         props: ['name', 'fraction'],
  34.        template: '#counter',
  35.       });
  36.       app.mount('.app');
  37.       </script>
  39. </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