微信扫一扫打赏支持

vue子组件向父组件传递参数过程分析

vue子组件向父组件传递参数过程分析

一、总结

一句话总结：

1、在这个过程中，【子组件和父组件中的方法都执行了一次】，而且是子组件方法先，父组件方法后：比如下面实例中用户先点击了myclick()方法，然后执行了父组件的show()方法
2、所以【子组件自定义方法可以向父组件传递数据】
3、所以也相当于【子组件方法调用了父组件的方法】
<div id="app">
<!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 
  当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
<com2 @func123="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: '子组件中data中的数据'
    }
  },
  methods: {
    myclick() {
      // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
      //  emit 英文原意： 是触发，调用、发射的意思
      // this.$emit('函数名称', 参数, 参数) func123是
      this.$emit('func123', this.sonmsg)
    }
  }
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    datamsgFormSon: '父组件中的数据'
  },
  methods: {
    show(data) {
      alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
      this.datamsgFormSon = data
      alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
    }
  },
  components: {
    com2
  }
});
</script>

 

 

二、vue子组件向父组件自定义传递参数过程分析

转自或参考：Vue 父组件往子组件传递方法
https://www.cnblogs.com/wanguofeng/p/11264358.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 
      当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    <com2 @func123="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: '子组件中data中的数据'
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('函数名称', 参数, 参数) func123是
          this.$emit('func123', this.sonmsg)
        }
      }
    }
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: '父组件中的数据'
      },
      methods: {
        show(data) {
          alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
          this.datamsgFormSon = data
          alert('调用了父组件身上的 show 方法: --- ' + this.datamsgFormSon)
        }
      },
      components: {
        com2
      }
    });
  </script>
</body>

</html>

 

 
posted @ 2021-01-07 10:59  范仁义  阅读(302)  评论(0)    收藏  举报