VUE参考---父组件向子组件传递方法

转载

mob604757001c56 2020-04-23 11:48:00

文章标签 vue参考 html 微信人工智能自定义 文章分类 代码人生

VUE参考---父组件向子组件传递方法

一、总结

一句话总结：

1、在使用组件的位置传递方法：父组件中的show方法，子组件通过func使用：<com2 @func="show"></com2>

2、在子组件中通过$emit注册方法func，this.sonmsg是传递的参数：this.$emit('func', this.sonmsg)

3、使用传递过来的方法，在click中：<input type="button" value="这是子组件中的按钮 - 点击它，触发父组件传递过来的 func 方法" @click="myclick">

<div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>这是 子组件</h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>

二、父组件向子组件传递方法

博客对应课程的视频位置：

1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
15     <com2 @func="show"></com2>
16   </div>
17 
18   <template id="tmpl">
19     <div>
20       <h1>这是 子组件</h1>
21       <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
22     </div>
23   </template>
24 
25   <script>
26 
27     // 定义了一个字面量类型的 组件模板对象
28     var com2 = {
29       template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
30       data() {
31         return {
32           sonmsg: { name: '小头儿子', age: 6 }
33         }
34       },
35       methods: {
36         myclick() {
37           // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
38           //  emit 英文原意： 是触发，调用、发射的意思
39           // this.$emit('func123', 123, 456)
40           this.$emit('func', this.sonmsg)
41         }
42       }
43     }
44 
45 
46     // 创建 Vue 实例，得到 ViewModel
47     var vm = new Vue({
48       el: '#app',
49       data: {
50         datamsgFormSon: null
51       },
52       methods: {
53         show(data) {
54           // console.log('调用了父组件身上的 show 方法: --- ' + data)
55           // console.log(data);
56           this.datamsgFormSon = data
57         }
58       },
59 
60       components: {
61         com2
62         // com2: com2
63       }
64     });
65   </script>
66 </body>
67 
68 </html>