Vue.js parent <-> child 更新值，路由视图

Question

我在 child 视图中更新 parent 道具时遇到问题。在我的例子中，Contestant 是 parent，EditContestant 应该是 child。 Contestant.vue 应该存储（是的，答案可能就在这里——存储在 Vuex 中）用户信息和 EditContestant 应该只呈现编辑视图，允许编辑用户信息操作并通过自己的方法或 parent 方法保存.我已经包括了路由，所以你应该明白我在说什么。

结构是：

Contestant.vue
|-EditContestant.Vue

Contestant.vue:

<script>
    export default {
        data() {
            return {
                contestant: {
                    id: this.$route.params.id,
                    gender: '',
                    firstname: '',
                    lastname: '',
                },
            }
        },
    methods: {
            fetchContestant(id) {
        //some api call here                            
              vm.updatePropContestant(res.data);
        // ...
            },
            updatePropContestant(newData) {
                if (!this.contestant || this.contestant.length === 0) {
                    this.contestant = {};
                }
                this.contestant.firstname = newData.firstname;
                this.contestant.lastname = newData.lastname;
                this.contestant.id = newData.id;
                this.contestant.gender = newData.gender;
                // this.$forceUpdate();
            },
        },
        }
</script>
<template>
    <div>
        <router-view :contestant="contestant"  @interface="contestant = $event"></router-view>
    </div>
</template>

编辑Contestant.vue

<script>
    export default {
        data() {
            console.log('data');
            return {
                editContestant: {
                    id: '',
                    'firstname': '',
                    'lastname': '',
                    'gender': 0
                },
                edit: false
            }
        },
        props: ['contestant'],
        created: function () {
// tried also to fetchContestant if parent beforeCreate method with same result, so tried moving it here :(
            this.$parent.fetchContestant(this.$route.params.id);
        }
    }
</script>

<template>
<div class="col">
<input id="firstname" v-model="this.$parent.contestant.firstname" type="text" class="form-control"                                placeholder="First name" 
<!-- this doesn't help either v-on:input="updateParentValue($event.target.value)" --> >
                </div>
</template>

app.js

require('./bootstrap');
window.Vue = require('vue');
import router from './router';
new Vue({
    el: "#app",
    router,
    // render: h => h(app)
});

router/index.js


import contestantComponent from '../components/Contestant/Contestant'
import contestantEditComponent from '../components/Contestant/EditContestant'
Vue.use(Router)
export default new Router({
    routes: [
        {
            path: '/contestant/:id',
            component: contestantComponent,
            children: [
                {

                    name: 'Contestant edit',
                    component: contestantEditComponent,
                    path: '/contestant/:id?/edit',
                },
                {
                    name: 'View contestant',
                    component: ViewContestantComponent,
                    path: '',
                }
            ],
    ]
})

当我向输入添加内容时出现错误：


found in

---> <EditContestant> at resources/js/components/Contestant/EditContestant.vue
       <Contestant> at resources/js/components/Contestant/Contestant.vue
         <Root>
warn @ app.js:41366
logError @ app.js:42625
globalHandleError @ app.js:42620
handleError @ app.js:42580
invokeWithErrorHandling @ app.js:42603
invoker @ app.js:42916
original._wrapper @ app.js:48273

和

app.js:42629 TypeError: Cannot read property '$parent' of null
    at _c.on.input (app.js:37434)
    at invokeWithErrorHandling (app.js:42595)
    at HTMLInputElement.invoker (app.js:42916)
    at HTMLInputElement.original._wrapper (app.js:48273)

Answer 1

从 EditContestatn.vue 文件的 this.$parent... 中删除 this 有帮助。感谢@CloudSohJunFu 的帮助。如果您想回答我的问题，我将很乐意接受您的回答并删除我自己的回答。

Answer 2

您不需要在模板中使用 this.，只需使用 $parent。模板已在 this. 范围内。

父子之间的通信应该使用Props down events up，而不是直接通过this.$parent.function()调用函数。你应该 $emit('callFunc') 然后 @callFunc="function"。

Vue.js parent <-> child 更新值，路由视图

Vue.js parent <-> child updating value, routing view

javascript

routing

parent-child

vue.js