Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【Vue】Vue 组件的定义及组件之间的通信
Blogger Information
Blog 94
fans 0
comment 0
visits 92700
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】Vue 组件的定义及组件之间的通信
可乐随笔
Original
1493 people have browsed it

Vue 组件的定义及组件之间的通信

1. 组件的注册

总结：

1.挂载点
2.创建VUE组件实例（根组件）
3.创建全局组件
4.声明子组件及孙组件
5.组件与挂载点绑定

HTML代码实例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>组件的注册</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10. </head>
  12. <body>
  13.     <!-- 挂载点 -->
  14.     <div id="app">
  15.         <!-- 组件挂载 -->
  16.         <greeting />
  17.     </div>
  19.     <script>
  20.         // 应用实例
  21.         const app = Vue.createApp({
  22.             // 根组件配置项
  23.         });
  25.         //   全局组件(父组件)
  26.         //   app.component(组件名称,{组件配置项})
  27.         app.component('greeting', {
  28.             // html模板
  29.             template: `
  30.         <h2>Hello, {{uname}}</h2>
  31.         <button @click='setLike'>点赞 + {{count}}</button>
  32.         <!-- 命名规则: 小驼 -> 肉串 -->
  33.         <my-award v-if='count >= 10' />
  34.         `,
  35.             // 数据
  36.             data() {
  37.                 return {
  38.                     uname: '王老师',
  39.                     count: 0,
  40.                 };
  41.             },
  42.             // 方法
  43.             methods: {
  44.                 setLike() {
  45.                     this.count++;
  46.                 },
  47.             },
  49.             // 声明子组件(复数属性)
  50.             components: {
  51.                 // 奖励组件
  52.                 myAward: {
  53.                     template: `<p>实在太受欢迎了</p>`,
  54.                     data() {
  55.                         return {};
  56.                     },
  57.                     components: {
  58.                         // 声明子的子组件
  59.                         //   userName: 小驼
  60.                         //   last-user-name : 肉串
  61.                     },
  62.                 },
  63.             },
  64.         });
  66.         // 根组件实例 (vue应用与挂载点绑定)
  67.         const vm = app.mount('#app');
  68.     </script>
  69. </body>
  71. </html>

2. 向子组件值参：属性

总结：

props:用于接收父组件中传来的参数（用的是自定义属性）

HTML代码实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>向子组件值参：属性</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app"></div>
  14.     <!-- 父组件的模板 -->
  15.     <template id="parent">
  16.         <counter uname='admin' email='nx99@qq.com'>
  17.     </template>
  18.     <!-- 子组件模板：必须使用ID选择符 -->
  19.     <template id="child">
  20.         <p>UserName:{{uname}}</p>
  21.         <p>UserEmail:{{email}}</p>
  22.     </template>
  23.     <script>
  24.         const app = Vue.createApp({
  25.             //父组件
  26.             template: `#parent`,
  27.         });
  28.         app.component('counter', {
  29.             //子组件
  30.             // props:用于接收父组件中传来的参数（用的是自定义属性）
  31.             props: ['uname', 'email'],
  32.             template: `#child`,
  33.         })
  34.         const vm = app.mount('#app');
  35.     </script>
  36. </body>
  38. </html>

3. 向父组件值参：自定义事件

总结：

  1. 父 -> 子：自定义属性
  2. 子 -> 父：自定义事件

HTML代码实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>向父组件值参：自定义事件</title>
  9.     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  10. </head>
  12. <body>
  15.     <!--
  16.         1. 父 -> 子：自定义属性
  17.         2. 子 -> 父：自定义事件
  18.     -->
  20.     <div id="app">
  21.         <counter @review='review'>
  22.     </div>
  23.     <template id="counter">
  24.         <button @click="count++">点赞 + {{count}}</button>
  25.         <button @click="review()">评论</button>
  26.     </template>
  28.     <script>
  29.         const app = Vue.createApp({
  30.             methods: {
  31.                 review(count) {
  32.                     console.log(count);
  33.                     if (count >= 10) {
  34.                         alert('可以下课了');
  35.                     };
  36.                 },
  37.             },
  38.         });
  39.         app.component('counter', {
  40.             template: `#counter`,
  41.             data() {
  42.                 return {
  43.                     count: 5,
  44.                 }
  45.             },
  46.             methods: {
  47.                 review() {
  48.                     this.$emit('review', this.count);
  49.                 },
  50.             },
  51.         })
  53.         const vm = app.mount('#app');
  54.     </script>
  55. </body>
  57. </html>
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