vue中自定义组件

一.App.vue是父组件，UserComponent.vue是子组件

1.App.vue的代码

<template>
  <div>
    <!-- CustomEvent 这个自定义事件是发生在<UserComponent>组件中的，所以 
      CustomEvent事件的触发代码需要在UserComponent.vue中编写-->
    <UserComponent v-on:CustomEvent="alert666"></UserComponent>
  </div>
</template>

<script>
import UserComponent from "./components/UserComponent.vue";
export default {
  name: "App",
  components: {
    UserComponent,
  },
  methods: {
    alert666: function () {
      alert("666");
    },
  },
};
</script>

<style>
</style>

注意点：

CustomEvent 这个自定义事件是发生在<UserComponent>组件中的，所以

      CustomEvent事件的触发代码需要在UserComponent.vue中编写

2.UserComponent.vue的代码

<template>
  <div>
    <!-- triggerCustomEvent 点击按钮后，对App.vue组件的CustomEvent事件进行‘怎么触发’的定义-->
    <button v-on:click="triggerCustomEvent">出发CustomEvent事件</button>
  </div>
</template>

<script>
export default {
  name: "UserComponent",
  data: function () {
    return {
      msg: "你好",
    };
  },
  methods: {
    triggerCustomEvent() {
      //
      this.$emit("CustomEvent");
    },
  },
};
</script>

注意点：

  methods: {
    triggerCustomEvent() {
      //
      this.$emit("CustomEvent");
    },
  },

自定义组件的方法。这里定义了一个名为triggerCustomEvent的方法，当调用这个方法时，会使用this.$emit触发一个名为CustomEvent的事件。这个事件可以被组件的父组件监听到，从而执行一些操作。（this是UserComponent这个组件的对象VC，this.$emit是一个实例方法，用于子组件向其父组件发送自定义事件的通知。这是组件之间通信的一种方式，特别是在父子组件之间）

二.大体流程图

二.自定义组件还可以向父组件传递数据（开发常用）

1.先看子组件UserComponent.vue的普通传递数据的写法

 methods: {
    triggerCustomEvent() {
      //这里还可以传递数据到父组件，如传一个张三，23岁的数据,数据的接收是在回调函数的参数上接收
      this.$emit("CustomEvent", this.name, this.age);
    },
  },

 在这段代码中，this.$emit("CustomEvent", this.name, this.age);红色标识的就是要传递到父组件的数据，这些数据通常来源于（后台Java响应过来的数据）数据库，这里只简单来源于data配置项

data配置项数据（组件中的data配置项return回去的必须是一个对象，不能是一个函数）

  data: function () {
    return {
      msg: "你好",
      name: "张三",
      age: 23,
    };
  },

2.App.vue中接收子组件UserComponent传过来的参数

 methods: {
    // alert666()回调函数接收子组件传过来的数据
    alert666: function (name, age) {
      console.log(name, age);
      alert("666");
    },
  },

这里是用参数的接收，使用自然是在方法体中使用