语法

2023年04月22日

柏拉文

越努力，越幸运

一、原生事件

---

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","哈哈哈");
    }
}

三、生命周期事件

---

Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能

3.1 直接绑定

<template>
  <div>
    <Comp @hook:mounted="hookMounted" />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Comp from "./components/Comp.vue"

export default defineComponent({
  components: {
    Comp,
  },
  methods: {
    hookMounted(){
      console.log("嘻嘻")
    }
  }
});
</script>