Vue学习计划-Vue2--VueCLi（四）组件传值和自定义事件

news2024/9/25 7:18:54

1. 组件传值

组件化编码流程：
1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
2. 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
  1. 一个组件在用，放在组件自身即可
  2. 一些组件在用，放在他们共同的父组件上（状态提示）
3. 实现交互：从绑定事件开始
props适用于：
1. 父组件 ===> 子组件通信
2. 子组件 ===> 父组件通信（要求父先给子一个事件）
3. 组件接收形式

    1. props: ['xxx']
    2.  props:{
        xxx:{
            type: String,
            required: true // 必传
        },
        xxx:{
            type: Number, // 类型
            default: 20 // 默认值
            ...自定义校验等等
        }
    }
    3. props:{
        xxx: Number， // 设置类型
        xxx:{
           type: Number, // 类型
           default: 20 // 默认值
           ...自定义校验等等
       }
  }

props接收的值不可以修改

示例：我们只需要四个组件，父组件APP.vue，子组件SelectInput.vue、SelectList .vue、SelectMulDel.vue，需求：子组件操作数据改变父组件内的列表数据，实现增删
1. 文件目录:components文件夹内创建子组件文件
在这里插入图片描述
2. 在父组件APP.vue中：引入3个子组件

因为所有的子组件共同需要用到列表的数据，所以数据写在父组件内
因为操作的数据在父组件内部。所以和操作方法都写在父组件内

<template>
  <div>
    <SelectInput :addDataList="addDataList"></SelectInput>
    <SelectList :daList="dataList" :delDataList="delDataList"/>
    <SelectMulDel :mulDelDataList="mulDelDataList"></SelectMulDel>
  </div>
</template>
<script>
import SelectList from './components/SelectList.vue'
import SelectInput from './components/SelectInput.vue'
import SelectMulDel from './components/SelectMulDel.vue'
export default {
  name: 'App',
  components:{
    SelectList,
    SelectInput,
    SelectMulDel
  },
  data(){
    return {
   	 // 数据创建在父组件内
      dataList:[
        { name: '小红', checked: false},
        { name: '小绿', checked: false},
      ]
    }
  },
  methods:{
    // 添加数据
    addDataList(val){
      this.dataList.push(val)
    },
    // 删除数据
    delDataList(index){
      this.dataList.splice(index, 1)  
    },
    // 批量删除
    mulDelDataList(){
      console.log(this.dataList);
      this.dataList = this.dataList.filter(item=> !item.checked)
    }
  }
}
</script>

子组件SelectInput.vue中：

编写添加数据和添加按钮功能
通过props传入的添加方法实现添加功能

<template>
    <div class="container">
        <input type="text" v-model="value">
        <button @click="add">添加</button>
    </div>
</template>
<script>
export default{
    props:['addDataList'],
    data(){
        return {
            value: '小美丽'
        }
    },
    methods:{
        add(){
            console.log(this.value);
            this.addDataList({ name: this.value, checked: false })
        }
    }
}
</script>

子组件SelectList.vue中：

展示列表数据和行内删除
通过props传入的删除方法实现行内删除功能

<template>
    <div class="container">
        <ul>
            <!-- 批量删除， key为唯一值， 假设name不可以重复 -->
            <li v-for="(item, index) in daList" :key="item.name">
                <!-- v-model双向绑定，直接改变值，就相当于改变props传入的值,引起错误 -->
                <!-- <input type="checkbox" v-model="item.checked" @change="item.checked = !item.checked"> -->
                <input type="checkbox" :value="item.checked" @change="item.checked = !item.checked">
                {{ item.name }}
                <button @click="del(index)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default{
    props:['daList', 'delDataList'],
    methods:{
        del(index){
        // props 传入的值不允许改变
        //   this.daList.splice(index, 1) 
            this.delDataList(index, 1)  
        }
    }
}
</script>
<style scoped>
.container{
    background-color: antiquewhite;
}
ul{
    list-style: none;
}
</style>

子组件SelectMulDel.vue中：

展示列表数据的选择行为
通过props传入的批量删除方法实现批量删除功能

<template>
    <div>
        <button @click="mulDelete">批量删除</button>
    </div>
</template>
<script>
export default{
    props:['mulDelDataList'],
    methods:{
        mulDelete(){
            this.mulDelDataList()
        },
    }
}
</script>

展示效果：点击功能ok

2. 组件的自定义事件

一种组件间通信的方式，适用于：子组件=>父组件
使用场景：A是父组件，B是子组件，B想传给A，那么就要在A中给B绑定自定义事件（事件的回调在A中）
绑定自定义事件：
1. 第一种方式：在父组件中：<Demo @my-event="test"></Demo>
2. 第二种方式：在父组件中：
```
<Demo ref="demo"></Demo>
....
mounted(){
  this.$refs.xxx.$on('my-event', this.test)
}
```
1. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法
触发自定义事件：this.$emit('my-event', 数据)
解绑自定义事件：this.$off('my-event')
组件上也可以绑定原生DOM事件，需要使用native修饰符

示例：上述的props案例是父组件将数据和操作方法统一已props形式传入子组件，子组件还需接收才可使用，现在我们将自定义事件编写，在此已SelectInput.vue为例

第一种：自定义事件@方式

App.vue内修改为：@addDataList 接收子组件传过来的自定义事件

	<SelectInput @addDataList="addDataList"></SelectInput>

子组件内SelectInput.vue修改为：

<template>
  <div class="container">
    <input type="text" v-model="value" />
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "小美丽",
    };
  },
  methods: {
    add() {
      this.$emit("addDataList", { name: this.value, checked: false });
      // 可emit提交多个自定义事件
    },
  },
};
</script>

第二种：自定义事件ref方式

App.vue内修改为：

SelectInput 标签上添加ref属性，
生命周期mounted中，通过$on绑定事件
生命周期beforeDestroy中，通过$off移除自定义事件

<SelectInput ref="MyInput"></SelectInput>
...
mounted() {
    this.$refs.MyInput.$on("addDataList", this.addDataList);
 },
 beforeDestroy() {
   this.$refs.MyInput.$off("addListInput");
    // this.$refs.MyInput.$off(); // 可以不传参数，移除所有自定义事件
 },