关于vue子组件修改父组件的值,因为vue是单项数据流,所以没办法直接在子组件中去修改父组件里面的数据,vue提倡单项数据流,为了防止项目过于复杂时,导致数据流难以理解。引用Vue的官网的话:父系 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父及组件的状态,从而导致你的应用的数据流向难以理解。所以在项目开发过程中,我们总是通过子组件触发父组件中方法的方式,通过父组件的方法,更改父组件的数据。
第一步:首先得保证父组件中有值吧
这是userManage.vue
data(){ return{ dialogCreate:'false' }}
第二步:在父组件中引用子组件
import Form from './userCreate'
第三步:父组件中注册子组件并引用
<template> <app-form></app-form></template> <script> export default{ name:'user', components:{ "app-form":Form }, data(){ return{ dialogCreate:'false' } } }</script>
第四步:把父组件的值绑定给子组件上
<app-form v-bind:dialogCreate = "dialogCreate" ></app-form>
第五步:既然父组件把值给了子组件了,子组件得接受和用吧
子组件
1.先接受export default{ props:['dialogCreate']}2.就可以直接在自组建中用了<p>{{dialogCreate}}</p>
第六步:向父组件发射一个方法
比如我们在后台数据接收成功时,告诉父组件已经成功
this.$emit('success',false);
第七步:父组件接收到这个方法并且执行改变父组件的值
<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form> methods: { check(){ alert(1); }, success(res){ this.dialogCreate = res; }}