vue_子組件綁定原生事件

本文轉載自查看原文 2020-03-05 16:03 618 vue

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>給組件綁定原生事件</h3>
    <!-- 這里是子組件向父組件傳遞參數綁定的自定義事件 -->
    <child :content="msg" @click="handleClick"></child>
    <h4>給組件綁定事件添加修飾符native</h4>
    <child :content="msg" @click.native="handleNativeClick"></child>
  </div>
</body>
<script type="text/javascript">
  Vue.component('child', {
    props: ['content'],
    template: '<div @click="handleClickSub">{{content}}</div>',
    methods: {
      handleClickSub () {
        this.$emit('click')
      }
    }
  })
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'this is a child'
    },
    methods: {
      handleClick () {
        console.log('子組件向父組件傳遞參數綁定的事件')
      },
      handleNativeClick () {
        console.log('綁定原生事件')
      }
    }
  })
</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue組件綁定原生事件 vue組件綁定原生事件 Vue基礎——將原生事件綁定到組件 vue怎么給自定義組件綁定原生事件 vuejs給組件綁定原生事件 vue的原生事件綁定流程 Vue-native綁定原生事件 Vue中如何監聽組件的原生事件 [Vue]組件——使用.native和$listeners將控件的原生事件綁定到組件 vue自定義組件添加原生事件監聽