Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实例演示父子组件之间通信方式
Blogger Information
Blog 70
fans 1
comment 0
visits 53108
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
实例演示父子组件之间通信方式
葡萄枝子
Original
646 people have browsed it

实例演示父子组件之间通信方式

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 引入vue框架库 -->
  9.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  10. </head>
  12. <body>
  13.     <div class="app">
  14.         <!-- 父组件 -->
  15.         <p>{{like}} <button @click="addNum">{{num}} +</button></p>
  16.         <!-- 子组件1 -->
  17.         <!-- 父组件向子组件传参通过自定义属性 -->
  18.         <child-component1 :like-type="like" :like-num="num"></child-component1>
  19.         <!-- 子组件2 -->
  20.         <!-- 子组件向父组件传参通过自定义方法 -->
  21.         <child-component2 :like-type="like" :like-num="num" @like-change="likeMethod"></child-component2>
  22.     </div>
  24.     <script>
  25.         const vm = new Vue({
  26.             el: '.app',
  27.             data() {
  28.                 return {
  29.                     like: '喜欢',
  30.                     num: 0,
  31.                 }
  32.             },
  33.             // 局部组件
  34.             components: {
  35.                 // 组件1，父组件向子组件传参
  36.                 childComponent1 : {
  37.                     // props 接受父组件向子组件的自定义传参
  38.                     props: ['likeType', 'likeNum'],
  39.                     // 组件模板显示父组件的传参
  40.                     template: `<p>like-type: {{likeType}}, like-num: {{likeNum}}</p>`,
  41.                 },
  42.                 // 组件2，子组件向父组件传参
  43.                 childComponent2 : {
  44.                     // props 接受父组件向子组件的自定义传参
  45.                     props: ['likeType', 'likeNum'],
  46.                     // 改变父组件的喜欢类型和喜欢数量
  47.                     template: `<p>
  48.                         <label for="like-type">like-type</label> <input text="text" id="like-type" value="" /><br />
  49.                         <label for="like-num">like-num</label> <input text="text" id="like-num" value="" /><br />
  50.                         <button @click="$emit('like-change', $event)">change</button>
  51.                         </p>`
  52.                     ,
  53.                 },
  54.             },
  55.             // 方法
  56.             methods: {
  57.                 // 父组件 num 自增
  58.                 addNum() {
  59.                     this.num++;
  60.                 },
  61.                 // 子组件改变父组件 like-type 和 like-num
  62.                 likeMethod(ev) {
  63.                     let likeType = ev.target.parentNode.querySelector('#like-type').value;
  64.                     let likeNum = ev.target.parentNode.querySelector('#like-num').value;
  65.                     this.like = likeType;
  66.                     this.num = likeNum;
  67.                 },
  68.             },
  69.         });
  70.     </script>
  71. </body>
  73. </html>

1. 父组件向子组件通过自定义属性传参

  • 点击喜欢后面的自增按钮3次，父组件喜欢数为 3+，父组件向子组件1传参显示图

父组件向子组件传参

2. 子组件向父组件通过自定义方法传参

  • 在上图中，修改 like-type 为 点赞 ，like-num 为 100 点击 change 子组件2，改变父组件的原来喜欢字符和喜欢数显示图

子组件向父组件传参

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