【Vue.js】Vue填坑之父组件向子组件传递数据时，因变量命名问题导致传递失败

最新推荐文章于 2023-03-24 15:27:22 发布

一生ea

最新推荐文章于 2023-03-24 15:27:22 发布

阅读量374

点赞数 1

分类专栏： Vue.js 文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_39006917/article/details/114759572

版权

本文探讨了在Vue.js中，父组件向子组件传递数据时因变量命名大小写不一致导致的问题。当父组件使用sonName属性传递数据，而子组件props中定义为sonName时，由于HTML属性不区分大小写，数据会被解析为sonname，导致子组件无法正确接收到数据。解决办法是确保父子组件间属性名称大小写的统一。

摘要由CSDN通过智能技术生成

父组件向子组件传递数据的做法：

父组件调用子组件时，以属性绑定的方式将要传递的数据绑定到子组件标签上。
子组件获取数据时，在子组件对象中，使用props选项声明获取的数据，进行绑定属性的拦截，即接收来自父组件的数据。

如下，使用局部组件创建方式，分别创建父组件和子组件。

new Vue({
   
        el:"#app",
        components:{
   
            'my-father':{
   
                template:"#father",
                data(){
   
                    return {
   
                        name:"父组件",
                        age:32,