Vue 父组件往子组件传递方法

<!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>
巴特西

Vue 父组件往子组件传递方法

最新文章

热门文章
