Javascript Vue.js父级<-&燃气轮机；子更新值，路由视图

我在更新子视图中的父属性时遇到问题。在我的情况下，参赛者是父母，参赛者应该是孩子。Competitor.vue应该存储（是的，答案可能就在这里-存储为Vuex）用户信息，EditCompetitor应该只呈现编辑视图，允许编辑用户信息操作，并通过自己的方法或父方法保存。我已经包括了路由，所以你应该明白我说的

结构是：

Contestant.vue
|-EditContestant.Vue

Competitor.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>

路由器/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

---

从editQuesticatn.vue文件中的

此。$parent…

中删除

此

有帮助。谢谢你的帮助@cloudsohunfu。如果您想回答我的问题，我很乐意接受您的回答并删除我自己的。

从

此中删除
此
。$parent…
在editQuesticatn.vue文件中帮助。谢谢你的帮助@cloudsohunfu。如果您想回答我的问题，我很乐意接受您的答案并删除我自己的。
您不需要
这个。
在模板中，只需使用
$parent
。模板已在
此范围内。
范围内

父级和子级之间的通信应该使用，而不是通过
this.$parent.function（）
直接调用函数。您应该
$emit（'callFunc'）
然后
@callFunc=“function”
 您不需要
这个。
在模板中，只需使用
$parent
。模板已在
此范围内。
范围内

父级和子级之间的通信应该使用，而不是通过
this.$parent.function（）
直接调用函数。您应该
$emit（'callFunc'）
然后
@callFunc=“function”
 您不需要
这个。
在模板中，只需使用
$parent
。除此之外，始终尝试使用props&event，而不是通过this.$parent.function（）
直接调用函数。您应该
$emit（'callFunc'）
然后
@callFunc=“function”
。你能试着在JsBin中模拟它吗？@CloudSohJunFu我会试着把它放到网上。这是怎么回事？父母。。。有效果吗？我的意思是它用实际的、正确的数据填充我的表单编辑：哦，男人/女人！！我爱你！删除此选项有效。谢谢你的进一步建议。请您再解释一下在我的用例中在哪里使用$emit好吗？有很多例子，但都是在单文件模式下。Vue.js允许太多。您不需要
这个。
在模板中，只需使用
$parent
。除此之外，始终尝试使用props&event，而不是通过this.$parent.function（）

直接调用函数。您应该

$emit（'callFunc'）

然后

@callFunc=“function”

。你能试着在JsBin中模拟它吗？@CloudSohJunFu我会试着把它放到网上。这是怎么回事？父母。。。有效果吗？我的意思是它用实际的、正确的数据填充我的表单编辑：哦，男人/女人！！我爱你！删除此选项有效。谢谢你的进一步建议。请您再解释一下在我的用例中在哪里使用$emit好吗？有很多例子，但都是在单文件模式下。Vue.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)