今天在模拟小面试的时候,面试官提问了一个问题 是除了用子传父的方式 还有那种方式可以让子组件修改父组件中的变量,当时想的是 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定prop 都使得其父子 prop 之间形成了一个单向下行绑定,子组件除了向父组件通过 $emit派发事件 是不能改变父组件中的数据的 后来查了查相关资料 发现在给子组件传数据是加.sync这个修饰符可以修改!
首先是最常见的子传父
子:this.$emit('自定义事件名称', 数据)
在父组件引用子组件的标签上绑定@自定义事件名称='回调函数'
父:methods: { 回调函数() {//逻辑处理 } }
具体代码这里就不演示了
.sync
父组件
<template>
<div class="home">
<child :titleSync.sync="title"/>
<span>{{ '我是父组件:' + title}}</span>
</div>
</template>
<script>
import Child from '../components/Child'
export default {
name: 'home',
components: {
Child,
},
data() {
return {
title: 'sync修饰符',
}
}
}
</script>
<template>
<div>
子组件
<input type="text" v-model="config">
</div>
</template>
<script>
export default {
name: 'Child',
props: {
titleSync: String,
},
computed: {
config: {
get() {
return this.titleSync
},
set(val) {
this.$emit('update:titleSync', val)
}
}
}
}
</script>
网友评论