Community Learn Tools Library Leisure
search
English
Home > List of blog posts > VUE父子组件之间通信方式实例演示
Blogger Information
Blog 41
fans 0
comment 0
visits 41144
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
597 people have browsed it

作业内容：实例演示父子组件之间通信方式

  1. 一、父级数据传递给子级
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>父组件向子组件传参</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="app">
  12.       <!-- 父组件是通过自定义属性的方式将参数传到子组件中的 -->
  13.       <btn-inc :my-home="sichuan" :my-count="count"></btn-inc>
  14.     </div>
  15.     <script>
  16.       const vm = new Vue({
  17.         el: document.querySelector("#app"),
  18.         data() {
  19.           return {
  20.             sichuan: "天府之国四川",
  21.             count: 0,
  22.           };
  23.         },
  24.         // 局部组件
  25.         components: {
  26.           btnInc: {
  27.             props: ["myHome", "myCount"],
  28.             //组件之间的数据传递是单向的,不允许在子组件中更新父组件中的数据
  29.             template: `
  30.             <div>
  31.                 <span>{{myHome}}</span>
  32.                 </div>
  33.             `,
  34.             data() {
  35.               return {
  36.                 num: this.myCount,
  37.               };
  38.             },
  39.           },
  40.         },
  41.       });
  42.       console.log(vm.count);
  43.  // 子组件中更新父组件的数据是通过事件完成
  44.     </script>
  45.   </body>
  46. </html>

父组件是通过自定义属性的方式将参数传到子组件中的

图示：
父组件向子组件传参

二、子组件向父组件传参

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>子组件向父组件传参</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <!-- 子组件中更新父组件的数据是通过事件完成 -->
  12.       <btn-inc :my-home="sichuan" :my-count="count" @click-count="handle"></btn-inc>
  13.     </div>
  14.     <script>
  15.       const vm = new Vue({
  16.         // 子组件向父组件传参是通过声明同名事件来实现
  17.         el: document.querySelector("#app"),
  18.         data() {
  19.           return {
  20.             sichuan: "天府之国四川",
  21.             count: 0,
  22.           };
  23.         },
  24.         // 局部组件
  25.         components: {
  26.           btnInc: {
  27.             props: ["myHome", "myCount"],
  28.             // 组件之间的数据传递是单向的,不允许在子组件中更新父组件中的数据
  29.             // $emit(父组件中要使用的方法名称,子组件要传给父组件的值 )
  30.             template: `
  31.             <div>
  32.                 <button @click="$emit('click-count',15 )">点赞: + {{myCount}}</button>
  33.                 <span>{{myHome}}</span>
  34.                 </div>
  35.             `,
  36.           },
  37.         },
  39.         // 父组件更新数据的方法
  40.         methods: {
  41.           handle(value) {
  42.             console.log(this.count);
  43.             this.count += value;
  44.             this.sichuan = "燕京之都";
  45.           },
  46.         },
  47.       });
  48.     </script>
  49.   </body>
  50. </html>

子组件中更新父组件的数据是通过事件完成

知识要点：

  1. 父组件 向 子组件 传参: 自定义属性
  2. 子组件 向 父组件 传参: 自定义方法

图示：
子组件向父组件传参

三、父组件和子组件之间双向传参

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>父组件和子组件之间双向传参</title>
  7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <div id="app">
  11.       <p>父组件: {{price}} 元</p>
  12.       <p>
  13.         <span>子组件:</span>
  14.         <my-input :my-price="price" @input-text="handle"></my-input> 元
  15.       </p>
  16.     </div>
  17.     <script>
  18.       const vm = new Vue({
  19.         el: document.querySelector("#app"),
  20.         data() {
  21.           return {
  22.             price: 8975,
  23.           };
  24.         },
  25.         // 局部组件
  26.         components: {
  27.           "my-input": {
  28.             props: ["my-price"],
  29.             template: `
  30.              <input type="text" :value="myPrice" @input="foo" />
  31.             `,
  32.             methods: {
  33.               foo(ev) {
  34.                 this.$emit("input-text", ev.target.value);
  35.               },
  36.             },
  37.           },
  38.         },
  39.         methods: {
  40.           handle(value) {
  41.             console.log(value);
  42.             this.price = value;
  43.           },
  44.         },
  45.       });
  46.     </script>
  47.   </body>
  48. </html>

图示：
父组件和子组件之间双向传参

Correcting teacher：天蓬老师天蓬老师

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