【Vue】父子组件通信

[Vue]父子组件通信

前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💨💨💨
💎接上一篇 Vuex 五个核心

组件是 vue.js 强大的功能，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
根据组件传递数据的方向不同，分为父组件向子组件传值，子组件向父组件传值。

为了深入理解, 我们通过一个案例来更好的理解,首先我们需要两个组件 dropdown.vue(子组件) 和 register.vue(父组件)

实战背景:

子组件是我自己写的一个下拉菜单的样式, 用于父组件中用户完成信息登记.

需要完成的功能有:

父组件向子组件传值(下拉菜单的内容, id值, 当前选项索引值)

子组件向父组件反映选中的内容

附上动图

父组件向子组件传值

法一: props

父组件

<dropdownVue:selectData="gradeList"id="grade":current="currentgrade"></dropdownVue>

export default {
    data(){
        return {
            gradeList: [2021,2020,2019,2018],
            currentgrade: null
        }
    },
}

:selectData="gradeList"

: 使用

v-bind

绑定要传给子组件的值

gradeList

, 值可以是字符串, 数字, 对象, 数组…等

子组件

props声明接收的三种方式

功能: 让组件接收外部传过来的数据.

1. 简单的声明接收exportdefault{... props:['selectData','current']}
2. 接收的同时, 对数据进行类型限制exportdefault{ props:{ selectData: Array, current: Number }}
3. 接收的同时对数据进行类型限制,默认值的指定, 必要性的限制exportdefault{ props:{ selectData:{ type: Array, required:true//是否是必要的default:...//默认值为多少...}, current:{ type: Number, required:true,default:null}}}

注意: props为单向数据流, 即父级prop的更新会向下流动到子组件, 但是反过来则不行.我们不能在子组件中修改props数据.

法二: $parent

this.$parent.grade

即可获取 grade 值.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ksm7HXIO-1664793834323)(C:\Users\Lenovo\Desktop\笔记\JS\img\image-20221003165353978.png)]

子组件向父组件传值

每当下拉菜单选中的值更新时, 就在子组件中调用绑定的自定义事件,并把当前值作为参数传给父组件.

$emit

vm.$emit(eventName, [...args])

作用: 触发eventName事件, 附加参数会传给监听器回调.

父组件

<dropdownVue:selectData="gradeList"@changeData="changeGradeData"></dropdownVue>

exportdefault{
    methods:{// 获取到当前所选项changeGradeData(value){this.currentGrade = value
        }}}

@changeData="changeGradeData"

: 给子组件绑定一个自定义事件

changeData

是事件名, changeGradeData指这个事件的具体方法.

子组件

<divclass="dropdown"><span>{{ selectData[current] }}</span><div><divclass="my-drop-view"><divclass="drop-item"v-for="(item, index) in selectData":key="index"><inputclass="drop-radio"type="radio":id="getSelectNum(index)"@click="setChangeData(index)":checked="current==index"hidden><labelclass="drop-label":for="getSelectNum(index)">{{item}}</label></div></div>

exportdefault{//在需要的地方调用父组件定义的事件
    methods:{changeData(value){this.$emit('changeData', value)}}}

每当选项被切换时changeData事件就会被调用.

$emit + .sync

父组件

<dropdownVue:selectData="gradeList":changeDate.sync=currentgrade></dropdownVue>

就相当于

<dropdownVue:selectData="gradeList":current="currentgrade"@update:changeDate="value => currentgrade = value"></dropdownVue>

所以子组件内部就只需要$emit触发父组件的update:myPropName事件并且传入要改变的值val即可

子组件

setChangeData(value){this.$emit('update:changeDate',Number(value))}

$refs

refs
通过 ref 这个 attribute 为子组件赋予一个 ID 引用
子组件

父组件通过this.$refs.gradeInput获取到 DOM 元素和子组件实例

v-model

父组件

<dropdownVue:selectData="gradeList"v-model="current"></dropdownVue>

相当于

<dropdownVue:selectData="gradeList"v-bind:current="currentgrade"@input=" value => currentgrade = value"></dropdownVue>

默认传递一个名字叫value的props数据

@input=" value => currentgrade = value"

默认监听组件内部的 input 事件, 修改绑定的数据.

子组件

props:[...,'value']
method:{...this.$emit('input',Number(value))}