34-Vue脚手架-组件的自定义事件（使用自定义事件优化Todo-List案例）

组件的自定义事件

1.一种组件间通信的方式，适用于 子组件 ===> 父组件（这里也可以使用 props 传递数据进行实现）

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3.绑定自定义事件：

1）第一种方式，在父组件中

<!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用v-on 或 @）-->
<!--<Student v-on:malingshu="getStudentName"></Student>-->
<Student @malingshu="getStudentName" @demo="m1"></Student>

...
    
methods:{
    getStudentName(name){
        console.log("APP收到了学生的名字：", name)
        this.msg = name
    }  
}

2）第二种方式，在父组件中

<!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref属性）-->
<!--ref 在组件标签上获取的是组件实例对象-->
<!--<Student ref="student"></Student>-->

...
    
methods:{
    getStudentName(name){
        console.log("APP收到了学生的名字：", name)
        this.msg = name
    }  
},
mounted(){
    // 获取方式：this.$refs.xxx
    // this.$refs.student.$on 绑定自定义事件
    this.$refs.student.$on("malingshu", this.getStudentName)

    // this.$refs.student.$once 绑定自定义事件（一次性）
    // this.$refs.student.$once("malingshu", this.getStudentName)
}

3）若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

4.触发自定义事件（触发第3步绑定的 "malingshu" 自定义事件）

this.$emit("malingshu", 数据)

<template>
  <div class="student">
    <button @click="sendStudentName">点击把学生名字传给APP</button>
  </div>
</template>
        
<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    
    methods:{
     
      sendStudentName(){
        // 触发Student组件实例vc上的malingshu事件，传递一个this.name参数
        this.$emit("malingshu",this.name)

        // 触发Student组件实例vc上的demo事件
        this.$emit("demo")
      }
    }
  }
</script>

5.解绑自定义事件（解绑第3步绑定的 "malingshu" 自定义事件）

this.$off("malingshu")

<template>
  <div class="student">
    <button @click="sendStudentName">点击把学生名字传给APP</button>
        
    <button @click="unbind">解绑事件</button>
    <button @click="death">销毁当前Student组件的实例（vc）</button>
  </div>
</template>
        
<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    
    methods:{
     
      sendStudentName(){
        // 触发Student组件实例vc上的malingshu事件，传递一个this.name参数
        this.$emit("malingshu",this.name)

        // 触发Student组件实例vc上的demo事件
        this.$emit("demo")
      },
        
      unbind(){
        // 解绑一个自定义事件
        this.$off("malingshu")

        // 解绑多个自定义事件
        this.$off(["malingshu","demo"])

        // 解绑所有的自定义事件
        this.$off()
      },
      death(){
        // 销毁了当前Student组件的实例
        // 这里需要注意，销毁后所有Student实例的自定义事件全都不奏效
        this.$destroy()
      },
    }
  }
</script>

6.组件上也可以绑定原生DOM事件，需要使用native修饰符

通俗点讲，就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触  发的。

7.注意：通过  this.$refs.xxx.$on("malingshu", 回调) 绑定自定义事件时，回调要么配置在 methods中，要么用箭头函数，否则 this 指向会出问题

 

使用自定义事件的小案例

src/components/School.vue（使用 props 实现）

<template>
  <div class="school">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="sendSchoolName">点击把学校名字传给APP</button>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    props:["getSchoolName"],
    data(){
      return{
        name:"马铃薯的博客园",
        address:"河北省邯郸市"
      }
    },
    methods:{
      sendSchoolName(){
        this.getSchoolName(this.name)
      }
    }
  }
</script>

<style scoped>
  .school{
    background-color: skyblue;
    padding: 5px;
  }
</style>

src/components/Student.vue（触发自定义事件 和 解绑自定义事件）

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <h2>当前求和为：{{number}}</h2>
    <button @click="add">点击number++</button>
    <button @click="sendStudentName">点击把学生名字传给APP</button>
    <button @click="unbind">解绑事件</button>
    <button @click="death">销毁当前Student组件的实例（vc）</button>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",
    data(){
      return{
        name:"马铃薯",
        sex:"男",
        number:0
      }
    },
    methods:{
      add(){
        console.log("add回调被调用了")
        this.number++
      },
      sendStudentName(){
        // 触发Student组件实例vc上的malingshu事件，传递一个this.name参数
        this.$emit("malingshu",this.name)

        // 触发Student组件实例vc上的demo事件
        this.$emit("demo")
      },
      unbind(){
        // 解绑一个自定义事件
        this.$off("malingshu")

        // 解绑多个自定义事件
        this.$off(["malingshu","demo"])

        // 解绑所有的自定义事件
        this.$off()
      },
      death(){
        // 销毁了当前Student组件的实例
        // 这里需要注意，销毁后所有Student实例的自定义事件全都不奏效
        this.$destroy()
      },

    }
  }
</script>

<style scoped>
  .student{
    background-color: pink;
    padding: 5px;
    margin-top: 30px;
  }
</style>

src/App.vue（绑定自定义事件 malingshu ）

<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!--通过父组件给子组件传递函数类型的props实现：子给父传递数据-->
    <School :getSchoolName="getSchoolName"></School>

    <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用v-on 或 @）-->
    <!--<Student v-on:malingshu="getStudentName"></Student>-->
    <Student @malingshu="getStudentName" @demo="m1"></Student>

    <!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref属性）-->
    <!--ref 在组件标签上获取的是组件实例对象-->
    <!--<Student ref="student"></Student>-->
  </div>
</template>

<script>
  import Student from "@/components/Student.vue";
  import School from "@/components/School.vue"

  export default{
    name:"App",
    data(){
      return{
        msg:"你好啊"
      }
    },
    components:{
      Student:Student,
      School:School
    },
    methods:{
      getSchoolName(name){
        console.log("APP收到了学校的名字：", name)
        this.msg = name
      },
      getStudentName(name){
        console.log("APP收到了学生的名字：", name)
        this.msg = name
      },
      m1(){
        console.log("demo事件被触发了")
      }
    },
    // mounted(){
    //   // 获取方式：this.$refs.xxx
    //   // this.$refs.student.$on 绑定自定义事件
    //   this.$refs.student.$on("malingshu", this.getStudentName)
    //
    //   // this.$refs.student.$once 绑定自定义事件（一次性）
    //   // this.$refs.student.$once("malingshu", this.getStudentName)
    // }
  }
</script>

<style>
 .app{
   background-color: gray;
   padding: 5px;
 }
</style>

src/main.js

import Vue from "vue"
import App from "./App.vue"

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

new Vue({
    el:"#app",
    render:h => h(App)
})

 

 

 

使用自定义事件优化Todo-List案例（将使用 props 传递数据进行实现 子组件 ===> 父组件，改为使用自定义事件实现）

src/components/UserHeader.vue（触发自定义事件 addTodo）

<template>
  <div class="todo-header">
    <input
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        v-model="title"
        @keyup.enter="add"
    />
  </div>
</template>

<script>

// ID 生成器库
import { nanoid } from "nanoid";

export default {
  name: "UserHeader",
  data() {
    return {
      title: "",
    };
  },

  // 接收来自App的addTodo方法
  // props: ["addTodo"],  // 注意，这里不需要通过 props 传递数据，因此也就不需要 props 在子组件接收数据了

  methods: {
    add() {
      // 校验数据
      if (!this.title.trim()) return alert("输入不能为空");
      // 将用户的输入包装成一个对象
      const todoObj = { id: nanoid(), title: this.title, done: false };
      console.log(todoObj)

      // 调用来自App的addTodo方法，通知App组件去添加一个对象
      // this.addTodo(todoObj);

      // 触发UserHeader组件实例vc上的自定义事件addTodo，传递一个todoObj对象
      this.$emit("addTodo", todoObj)

      // 清空输入
      this.title = "";
    },
  },
};
</script>

<style scoped>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
  0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

src/components/UserList.vue（无变动）

<template>
  <ul class="todo-main">
    <!--根据todos数据，进行遍历-->
    <UserItem
        v-for="todoObj in todos"
        :key="todoObj.id"
        :todo="todoObj"
        :checkTodo="checkTodo"
        :deleteTodo="deleteTodo"
    ></UserItem>
  </ul>
</template>

<script>
import UserItem from "./UserItem.vue";
export default {
  name: "UserList",
  components: {
    UserItem,
  },

  // 接收来自App的数据
  props: ["todos", "checkTodo",'deleteTodo'],
};
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>

src/components/UserItem.vue（无变动）

<template>
  <li>
    <label>
      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
      <!--如下代码也能实现功能，但不推荐，违反修改props的原则-->
      <!--<input type="checkbox" v-model="todo.done" @change="handleCheck(todo.id)"/>-->
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
  </li>
</template>

<script>
export default {
  name: "UserItem",
  //声明接收对象
  props: ["todo", "checkTodo", "deleteTodo"],

  // mounted() {
  //   console.log(this.todo)
  // }

  methods: {
    //勾选or取消勾选
    handleCheck(id) {
      console.log("勾选或取消勾选，id：",id)
      this.checkTodo(id);
    },
    //删除
    handleDelete(id) {
      if (confirm("确定删除吗")) {
        console.log("删除，id：",id)
        this.deleteTodo(id);
      }
    },
  },
};
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }

  li:hover {
    background-color: #ddd;
  }

  li:hover button {
    display: block;
  }
</style>

src/components/UserFooter.vue（触发自定义事件 checkAllTodo 和 clearAllTodo）

<template>
  <!-- v-show="total" 当total为0时，返回false,页面不显示，当total为非0时，返回true，页面显示-->
  <div class="todo-footer" v-show="total">
    <label>
      <!--<input type="checkbox" :checked="isAll" @change="checkAll" />-->
      <!--为什么可以用v-model，这是因为绑定的是计算属性isAll，没有修改props的值-->
      <input type="checkbox" v-model="isAll"/>
    </label>
    <span>
      <span>已完成{{ doneTotal }}</span> / 全部{{ total }}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>

</template>

<script>

// import { computed } from "vue";

export default {
  name: "UserFooter",

  // props: ["todos", "checkAllTodo", "clearAllTodo"],
  // 注意，这里不需要通过 props 传递"checkAllTodo", "clearAllTodo"数据，因此也就不需要 props 在子组件接收数据了
  props: ["todos"],

  methods: {
    // checkAll(e) {
    //   console.log("@checkAll",e.target.checked)
    //   this.checkAllTodo(e.target.checked);
    // },
    clearAll() {
      // this.clearAllTodo();
      // 触发UserFooter组件实例vc上的自定义事件clearAllTodo
      this.$emit("checkAllTodo")
    },
  },
  computed: {
    total() {
      return this.todos.length;
    },
    doneTotal() {
      // 1.遍历列表的方法
      // let i = 0
      // this.todos.forEach((todo)=>{
      //   if(todo.done === true) i++
      // });
      // return i

      // 2.reduce()方法，对数组中的每个元素按序执行一个提供的 reducer 函数，将其结果汇总为单个返回值
      //   const x = this.todos.reduce((pre, current) => {
      //     console.log("@",pre)
      //     return pre + (current.done ? 1 : 0);
      //   }, 0);
      //   return x;

      return this.todos.reduce(
          (pre, current) => pre + (current.done ? 1 : 0),
          0
      );
    },

    // isAll() {
    //   // 判断已完成 / 全部 前面的复选框够不够，取决于已完成的个数是否等于全部的个数
    //   return this.doneTotal === this.total && this.total > 0;
    // },

    // 计算属性 isAll 的完整写法
    isAll:{
      get(){
        console.log("@isAll 的 get",this.doneTotal === this.total && this.total > 0)
        return this.doneTotal === this.total && this.total > 0;
      },
      set(value){
        console.log("@isAll 的 set",value)
        // this.checkAllTodo(value)
        // 触发UserFooter组件实例vc上的自定义事件checkAllTodo，传递一个value数据
        this.$emit("checkAllTodo", value)
      }
    }
  },
};
</script>

<style scoped>
  /*footer*/
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }

  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }

  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>

src/App.vue

将使用 props 传递数据进行实现 子组件 ===> 父组件的函数，使用自定义事件实现（绑定自定义事件 addTodo、checkAllTodo 和 clearAllTodo ）

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <!--动态绑定函数，在父组件定义一个函数，子组件调用该函数，父组件就可以收到子组件传过来的参数 :addTodo="addTodo"-->
        <!--<UserHeader :addTodo="addTodo"></UserHeader>-->
        <!--使用自定义事件优化，通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用v-on 或 @）-->
        <UserHeader @addTodo="addTodo"></UserHeader>

        <UserList
            :todos="todos"
            :checkTodo="checkTodo"
            :deleteTodo="deleteTodo"
        ></UserList>

        <!--<UserFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"></UserFooter>-->
        <!--使用自定义事件优化，通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用v-on 或 @）-->
        <!--这里注意，:todos="todos" 动态绑定的是一个数组数据，而不是 子组件 ===> 父组件 所用的函数-->
        <UserFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"></UserFooter>

      </div>
    </div>
  </div>
</template>

<script>
import UserHeader from "./components/UserHeader.vue";
import UserList from "./components/UserList.vue";
import UserFooter from "./components/UserFooter.vue";

export default {
  name: "App",
  components: {
    UserHeader,
    UserList,
    UserFooter,
  },
  data() {
    return {
      todos: [
        { id: "001", title: "起床", done: true },
        { id: "002", title: "洗漱", done: false },
        { id: "003", title: "睡觉", done: true },
      ],
    };
  },
  methods: {
    // 添加一个todo
    addTodo(todoObj) {
      console.log("我是APP组件，我收到了数据：",todoObj)
      // unshift() 在数组头部添加元素
      this.todos.unshift(todoObj);
    },
    // 勾选or取消勾选一个todo
    checkTodo(id) {
      // forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
      this.todos.forEach((todo) => {
        // 将tudo的done属性进行取反
        if (todo.id === id) todo.done = !todo.done;
      });
    },
    // 删除一个
    deleteTodo(id) {
      // 数组.filter() 实现数组的过滤，创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
      // 过滤出，todo.id 不是 id 的数据
      this.todos = this.todos.filter((todo) => todo.id !== id);
    },
    // 全选or全不选
    checkAllTodo(done) {
      // forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数
      this.todos.forEach((todo) => {
        todo.done = done;
      });
    },
    //清除所有已经完成的任务
    clearAllTodo() {
     if(confirm("确认删除所有已完成的任务吗")){
       // 数组.filter() 实现数组的过滤，创建一个新数组, 其包含通过所提供函数实现的测试的所有元素
       // 过滤出，todo.done 还没完成 的数据
       // this.todos = this.todos.filter((todo) => todo.done == false);
       this.todos = this.todos.filter((todo) => !todo.done);
     }
    },
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
  0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>