如何解决vue中报错： Property or method “message“ is not defined on the instance but referenced during render_property or method "parammessage" is not defined o

作者：笔触狂放9 | 2024-03-26 08:47:48

踩

property or method "parammessage" is not defined on the instance but referen

报错如下：Property or method "message" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

下面是我写的代码部分


<body>
    <!-- 父组件 -->
    
    <div id="app" >
        {{message}}
        <!-- 4.通过使用子组件来赋值 将data中的数据传递给props -->
        <cpn :cmessage="message"></cpn>
    </div>
 
    <template id="cpn">
        <div>
            我是子组件
           
           父组件内容：{{message}} <!--3.这里传入父组件的data数据-->
             
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        
// 子组件 子组件里面是props
const cpn = {
    template:'#cpn',
    // 2.使用props来声明需要从父级接受到的数据
    props:['cmessage']
    
}
 
// 父组件
        const app = new Vue({
            el: '#app',
            data: {
                message: '父组件啦啦啦'
            },
            // 1.在父组件里面注册子组件
            components:{
                cpn
            }
        })
    </script>
</body>

出现这个问题完全是由于自己的马虎，在子组件的template模板中，引用父组件的message数据应该是 <cpn :cmessage="message"></cpn>这行代码中的cmessage。通过这行代码将data中的数据传递给了props。因此将这行代码修改为：<cpn :cmessage="cmessage"></cpn>就可以运行了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/315850