Vue2.x中父组件向子组件传参时数据格式问题-Unexpected token ‘}‘ in xxxx

Qwesh157

于 2020-07-27 11:17:34 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript html5

本文链接：https://blog.youkuaiyun.com/qwesh157/article/details/107607454

本文详细解析了Vue2.x中父组件向子组件传递参数时遇到的数据格式问题，特别是关于Unexpected token ‘}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue2.x中父组件向子组件传参时数据格式问题-Unexpected token ‘}’ in xxxx

**
HTML部分

<div id="app">
        <v-table :width="100%" :data="data" :columns="columns"></v-table>
</div>

JS部分

Vue.component('vTable',{
    props:{
        width:{
            type:String,
            default(){
                return '100%'
            }
        }
    },
    render(h) {
        return h('table',{
            style:{
                width:this.width
            }
        },[
            h('thead',[
                h('tr',ths)
            ]),
            h('tbody',trs)
        ])
    },  
})

此时会出现Unexpected token ‘}’ in 100%
修改Vue实例，数据驱动渲染
HTML部分

<div id="app">
        <v-table :width="width" :data="data" :columns="columns"></v-table>
</div>

Vue实例部分
var app = new Vue({
el:’#app’,
data:{
width:‘50%’
}
})
渲染成功：
不设置width时

<div id="app">
        <v-table :data="data" :columns="columns"></v-table>
</div>

不设置width

width=50%时