解决 vue项目中子组件调用父组件函数报错"TypeError: "this.$parent.b(p)“ is not a function,哭死我了

先发泄一下情绪,解决了好长时间,进入正题~~
1 关于子组件调用父组件函数并传参数,写正式项目前我先写了一个例子测试了一下(因为我是刚学的vuejs)
子组件代码:Child1.vue

<!--子组件调取父组件函数1-->
<template>
    <div>
        <!-- 子组件调用父组件方法和在父组件应用跳转页面都能看到这个按钮-->
        <button @click="c">child的按钮</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                u:'子组件带的参数'
            }
        },
        methods:{
            c(){
               this.child(this.u)
            },
            child(data){ //子组件调用父组件函数,并将当前子组件的参数传给父组件
                 this.$parent.b(data);
            }
        }

    }
</script>

父组件代码:Father1.vue

<!--子组件调取父组件函数1-->
<template>
    <div>
        <!--2 组件方式,引入子组件,将子组件的内容打在父组件上 组件方式-->
         <!--<child></child>-->
         <!--会将通过路由跳转的页面的内容放到此位置上,
         		注意:位置一定要对上,因为不管跳转和引入组件都是成为此页面的一部分-->
         <router-view></router-view>
        <!--<child></child>引入子组件和<router-view></router-view>路由跳转效果一样-->
        <span>
        <!--下面data中数据改变,他会跟着改变-->
            {{this.userName}}
        </span>
    </div>
</template>
<script>
    //2 组件方式
    //import child from './Child1.vue';
    export default {
        data(){
            return{
                userName:'father1的数据哦~'
            }
        },
        //2 组件方式
       // components:{
         //   child
        //},
        methods: {
            firstlog(){
                this.$router.push(
                    {
                        path:'/child1'
                    }
                )
            },
            b(data) {
                // this.userName = "child1引发的数据哦"
                this.userName = data
            },

        },
         mounted(){//页面加载就执行firstlog方法,将登陆页面加载出来,路由方式
           let that=this;//重点
           that.firstlog();
         }
    }
</script>

2 以上代码亲测好使,于是我就照搬到实际项目中,发现,,报错TypeError: "this.$parent.b(data)“ is not a function,我滴麻麻吖,尴尬了~于是百度,没有具体的解决方法,只说是因为代码布局什么的出错了,我用的是element-ui,用的是<el-container>布局,于是我开始检查,看有没有缺失的括号什么的,结果没有,我又开始都注释掉标签,一边测试一边打开,结果发现把 <el-container></el-container> 注释掉好用,继续打开,发现又不好用了,于是又继续一边测试一边打开,发现把 <el-main></el-main> 注掉,发现好用l,可是布局就散了,所以就换成了 <div></div> ,好用了,全好用了,所以,总结出一点,出现这个错误,1 可能是你哪个标签布局括号丢了后半部分,或者标签写法,位置不对,2 你用了不该用的标签~例如我的 <el-container></el-container>,<el-main></el-main> 好尴尬,谁会想到这个会导致报错,总之,就是标签的问题~~检查标签就没毛病~

发布了6 篇原创文章 · 获赞 0 · 访问量 599
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览