vue.js - 问题 - TypeError: XXX is not a function

Question

我在调用父函数时遇到问题：

v-on 处理程序中的错误：“TypeError：self.$parent.testAddCompontnet222 不是函数”

所以我在以下名为的文件中设置了一个测试函数（方法）testAddCompontnet222()

父文件：PageAdd.vue

<template>
    <b-container>
        <b-container>
            testVar2: (( {{ testVar2 }} ))
            <b-button @click="testAddCompontnet222();">Add Test 2</b-button>
            <SingleBlockTemplate v-if="componentTypeSelected == 1"></SingleBlockTemplate>
            <TripleBlockTemplate v-if="componentTypeSelected == 2"></TripleBlockTemplate>
        </b-container>                    
    </b-container>
</template>


<script>
    import axios from 'axios';
    import SingleBlockTemplate from './component_templates/SingleBlockTemplate.vue';
    import TripleBlockTemplate from './component_templates/TripleBlockTemplate.vue';
    import ComponentAddForm from './ComponentAddForm.vue';
    export default {
        data(){
            return {
                title: 'Case Studies',
                excerpt: 'some text here for reference',
                slug: 'unique',
                meta_title: 'title for search engines (should be the same as the page title)',
                meta_description: 'meta descriptions for search engines',
                meta_keywords: 'keywords',
                order: '1',
                status: '1',
                showAddComponentForm: false,
                error: false,
                errors: {},

                testVar2: '2',

                newContentData: {},

                componentTypeSelected: '2',
                componentTypes: {},
                componentList: {}
            };
        },
        mounted: function () {
            this.getComponentTypes();
            //this.componentTypeToCreate =
        },

        methods: {
            testAddCompontnet222(){
                this.testVar2 = '222!';
                console.log("test 222222!")
            },
            addPage(){
                axios({
                    method: 'post',
                    url: this.$appAPI+'/twg-cms/page',
                    data: {
                        title: this.title,
                        excerpt: this.excerpt,
                        slug: this.slug,
                        meta_title: this.meta_title,
                        meta_description: this.meta_description,
                        meta_keywords: this.meta_keywords,
                        order: this.order,
                        status: this.status
                    }

                }).then(response => {
                    console.log(response.data)
                }).catch(e => {
                    console.log(e)
                    this.errors.push(e)
                });
            },
            getComponentTypes(){
                axios.get(this.$appAPI+`/twg-cms/component_types`)
                    .then((response) => {
                        this.componentTypes = response.data.data;
                    })
                    .catch(() => {
                        console.log('handle server error from here');
                    });
            },
            componentTypeOnChange(value){
                //console.log(this.componentTypeSelected)
            }
        },
        components: {
            ComponentAddForm,
            SingleBlockTemplate,
            TripleBlockTemplate
        }
    }
</script>

然后我尝试从子元素（导入文件）调用该函数：TripleBlockTemplate.vue

我已经尝试使用 justthis.$parent.testAddCompontnet222();并且您现在可以在下面看到self.$parent.testAddCompontnet222();

但两者都返回相同的错误。我在其他组件上以完全相同的方式工作

<template>
        <form autocomplete="off" @submit.prevent="addComponent" method="post">
            <b-button @click="testAddCompontnet();">Add Test</b-button>
            <p>This is a triple block component</p>
            <ckeditor :editor="editor" v-model="content[0]" :config="editorConfig"></ckeditor>
            <ckeditor :editor="editor" v-model="content[1]" :config="editorConfig"></ckeditor>
            <ckeditor :editor="editor" v-model="content[2]" :config="editorConfig"></ckeditor>
            <b-button @click="addComponent" variant="outline-primary">Save component</b-button>

        </form>
</template>


<script>
import axios from 'axios';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
    data(){
        return {<template>
        <form autocomplete="off" @submit.prevent="addComponent" method="post">
            <b-button @click="testAddCompontnet();">Add Test</b-button>
            <p>This is a triple block component</p>
            <ckeditor :editor="editor" v-model="content[0]" :config="editorConfig"></ckeditor>
            <ckeditor :editor="editor" v-model="content[1]" :config="editorConfig"></ckeditor>
            <ckeditor :editor="editor" v-model="content[2]" :config="editorConfig"></ckeditor>
            <b-button @click="addComponent" variant="outline-primary">Save component</b-button>

        </form>
</template>


<script>
import axios from 'axios';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
    data(){
        return {
            editor: ClassicEditor,
            name: 'Name here',
            class: 'Class here',
            html_id: 'ID here',
            content:[
                '<div><h1>Title 1</h1><br /><p>some simple text here</p></div>',
                '<div><h1>Title 2</h1><br /><p>some simple text here</p></div>',
                '<div><h1>Title 3</h1><br /><p>some simple text here</p></div>'
            ],
            editorConfig: {
                // The configuration of the editor.
            }
        };
    },
    methods: {
        testAddCompontnet(){
            var self = this;
            self.$parent.testAddCompontnet222();
            console.log("test 222!")
        },
        addComponent(){
            axios({
                method: 'post',
                url: this.$appAPI+'/twg-cms/component',
                data: {
                    name: this.name,
                    content: JSON.stringify({content: this.content}),
                    class: this.class,
                    html_id: this.html_id
                }

            }).then(response => {
                console.log(response.data)
            }).catch(e => {
                console.log(e)
                this.errors.push(e)
            });
        }
    }
}
</script>

            editor: ClassicEditor,
            name: 'Name here',
            class: 'Class here',
            html_id: 'ID here',
            content:[
                '<div><h1>Title 1</h1><br /><p>some simple text here</p></div>',
                '<div><h1>Title 2</h1><br /><p>some simple text here</p></div>',
                '<div><h1>Title 3</h1><br /><p>some simple text here</p></div>'
            ],
            editorConfig: {
                // The configuration of the editor.
            }
        };
    },
    methods: {
        testAddCompontnet(){
            var self = this;
            self.$parent.testAddCompontnet222();
            console.log("test 222!")
        },
        addComponent(){
            axios({
                method: 'post',
                url: this.$appAPI+'/twg-cms/component',
                data: {
                    name: this.name,
                    content: JSON.stringify({content: this.content}),
                    class: this.class,
                    html_id: this.html_id
                }

            }).then(response => {
                console.log(response.data)
            }).catch(e => {
                console.log(e)
                this.errors.push(e)
            });
        }
    }
}
</script>

最后，这是我目前没有使用的工作方法......

以下代码将允许我使用相同/相似的代码来更新/更改父变量testVar1以更新其父变量：ComponentAddForm.vue下面

        testAddCompontnet(){
            var self = this;
            self.$parent.testVar1 = '11111! test;
            console.log("test 222!")
        },

组件AddForm.vue：

<template>
    <b-container>
        testVar1: (( {{ testVar1 }} ))
        <b-button @click="testAddCompontnet222();">Add Test 2</b-button>
        <SingleBlockTemplate v-if="this.componentTemplateId == 1"></SingleBlockTemplate>
        <TripleBlockTemplate v-if="this.componentTemplateId == 2"></TripleBlockTemplate>


    </b-container>
</template>


<script>
import axios from 'axios';

import SingleBlockTemplate from './component_templates/SingleBlockTemplate.vue';
import TripleBlockTemplate from './component_templates/TripleBlockTemplate.vue';

export default {
    props: ['componentTemplateId'],
    data(){
        return {
            name: 'Case Studies',
            testVar1: '1'

        };
    },

    mounted: function () {
        this.showComponentTemplate();
    },

    methods: {
        testAddCompontnet222(){
            this.$parent.testVar2 = '222!';
            console.log("we made it here <--------");
        },
        showComponentTemplate(){
            if(this.componentTemplateId === '1'){
                console.log('test 1')
            }
            if(this.componentTemplateId === '2'){
                console.log('test 2')
            }
        }
    },
    components: {
        SingleBlockTemplate,
        TripleBlockTemplate
    }
}


</script>

标签： vue.jsvuejs2