语法

2023年05月08日

柏拉文

越努力，越幸运

一、原生事件

---

1.1 直接绑定

<template>
    <button v-on:click="handleClick">点击</button>
    <!-- 基础语法缩写 -->
    <button @click="handleClick">点击</button>
</template>
<script>
    export default {
        name: "App",
        data() {
            return {};
        },
        methods: {
            handleClick(){
                console.log("事件系统");
            }
        },
    };
</script>

1.2 传入参数绑定

<template>
    <button v-on:click="handleClick($event, '参数')">点击</button>
    <!-- 传入参数绑定缩写 -->
    <button @click="handleClick($event, '参数')">点击</button>
</template>
<script>
    export default {
        name: "App",
        data() {
            return {};
        },
        methods: {
            handleClick(params, $event) {
                console.log(params, $event);
            },
        },
    };
</script>

1.3 动态事件绑定

<template>
    <button v-on:[event]="handleClick($event)">点击</button>
    <!-- 动态事件绑定缩写 -->
    <button @[event]="handleClick($event)">点击</button>
</template>
<script>
    export default {
        name: "App",
        data() {
            return {
                event: "click"
            };
        },
        methods: {
            handleClick($event) {
                console.log($event);
            },
        },
    };
</script>

二、自定义事件

---

2.1 直接绑定

父组件

<div>
    {/* 标准 */}
    <HelloWorld v-on:say="say"></HelloWorld>
    {/* 简写 */}
    <HelloWorld @say="say"></HelloWorld>
</div>

import HelloWorld from './HelloWorld.vue';

export default {
  name: "App",
  components: { HelloWorld },
  methods: {
    say(){
      console.log("说话")
    }
  },
};

子组件

<div>
    <h3>子组件</h3>
    <button @click="say">调用父组件事件</button>
</div>

methods:{
    say(){
      this.$emit("say");
    }
}

2.2 传入参数绑定

父组件

<div>
    {/* 全写 */}
    <HelloWorld v-on:say="say"></HelloWorld>
    {/* 简写 */}
    <HelloWorld @say="say"></HelloWorld>
</div>

import HelloWorld from './HelloWorld.vue';

export default {
  name: "App",
  components: { HelloWorld },
  methods: {
    say(content){
      console.log(content)
    }
  }
};

子组件

<div>
    <h3>子组件</h3>
    <button @click="say">调用父组件事件</button>
</div>

methods:{
    say(){
      this.$emit("say","哈哈哈");
    }
}