问

javascript - vue的自定义组件中可以定义事件吗？

pfm4191006 发布于 2022-11-09 11:13

html

如果我想在自定义组件中定义事件的话该怎么写呢？求大神解答

代码如下，如果我想加一个click事件可以实现吗？

 template: '{{a}}
'

全部代码

Title

4 个回答

**以下是实现代码亲测有效 O(∩_∩)O哈哈~
主要的点还是子组件的方法创建就是在创建组件的时候加v-on：event=“方法名称” 然后子组件自己处理自己的事件在methods中声明这个事件并做处理**

<p id="demo">
    <my-component>
        <!--<p slot="main-text">Hello!</p>-->
    </my-component>
</p>

<script>
  Vue.component('my-component',{
      template:'\
      <button class="container" v-on:click="doThis">\
      <slot name="main-text">\
      这里显示</slot>\
      </button>',
      data:function () {
          return{
          }
      },
      methods:{
          doThis:function () {
              alert(1111)
          }
      }
  })
    new Vue({
        el:"#demo",
        data:{

        }
    })
</script>

2022-11-12 01:46 回答

-DJIAJIAN-

关于自定义事件，官方文档有很好的解释及Demo，请查看http://cn.vuejs.org/v2/guide/...自定义事件

2022-11-12 01:46 回答

450651324_43c723
@click.native

2022-11-12 01:46 回答

我是黄小果1960

可以啊，只要在写成<h1 @click="hi()">{{a}}</h1>,然后在methods里写hi这个函数就行了，还是说你想添加两个点击事件？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue/dist/vue.js?1.2.1"></script>
    <title>Title</title>
</head>
<body>
    <p id="app">
        <!-- <h1 is="test"></h1> -->
        <test></test>
    </p>
    <script type="text/javascript">
        var mytest = Vue.extend({
            template: '<h1 @click="hi()">{{a}}</h1>',
            data: function () {
                return{
                    a: "this is a test"
                }
            },
            methods: {
              hi: function() {
                  alert(this.a);
              }
            }
        });
        var vm = new Vue({
            el: "#app",
            components: {
                "test": mytest
            }
        });
    </script>
</body>
</html>

2022-11-12 01:46 回答

闌珊脃_

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签