zoukankan      html  css  js  c++  java
  • vue中把一个事件绑定到子组件上

    官网上是这样描述的

    你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时,你可以使用 v-on的 .native 修饰符

    父组件App.vue

    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld @click="outClick"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      },
      methods: {
          outClick (){
              alert('我是父组件的方法')
          }
      }
    }
    </script>
    

    子组件HelloWord.vue

    <template>
      <div class="hello">
        <h1>HelloWorld</h1>
        <el-button type="primary">点我</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld'
    
    }
    </script>

    这时我们点击子组件的按钮是没有反应的,如果把父组件修改如下:

    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld @click.native="outClick"/>     <!--在单击事件上添加.native-->
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'app',
      components: {
        HelloWorld
      },
      methods: {
          outClick (){
              alert('我是父组件的方法')
          }
      }
    }
    </script>

    这时我们单击按钮,效果如下:

    总结:其实就是把一个单击事件从父组件传递给子组件





  • 相关阅读:
    机器学习笔记[保持更新]
    习题 7-3 uva211
    习题 7-2 uva225(回溯)
    习题7-1 uva 208(剪枝)
    poj2331 (IDA*)
    poj2449 (第k条最短路)
    POJ 1324(BFS + 状态压缩)
    hdu3567 八数码(搜索)--预处理
    poj 1367 robot(搜索)
    例 7-10 uva12212(迭代加深搜索)
  • 原文地址:https://www.cnblogs.com/baiyifengyun/p/13548063.html
Copyright © 2011-2022 走看看