Javascript 验证vue.js中的对象结构

我目前正在vue.js中构建一个组件，我有点问题。你看，你可以给我的组件提供很多参数，所以为了清楚起见，我决定采用以下方法：

<script type="text/javascript">
    Vue.$noClientConf = {
    'cmp_name':         'NoClient', 
    'cmp_title':        'Selection du client',
    'url':              'ajax/getclients.php',
    'parent':           null,
    'opt_texte':        'NomClientFR',
    'opt_valeur':       'NoClient',
    'cmp_max_options':  3,
    'opt_custom':       null,
    'data_size':        10,
    'data_style':       'btn btn-default btn-sm',
    'data_live_search': 'true'
    };
</script>

<div id="app">

  <div class="col-lg-2">
    <flex-select ref="NoClient" :conf="Vue.$noClientConf"></flex-select>
  </div>

</div>

<script type="text/javascript">
    var app = new Vue({
      el: "#app",
      data:{Vue}
    });
</script>

所以我的问题基本上是。。。是否有办法执行上述操作？

使用

否则，您可以将函数用作

FWIW，在一个示例中，我根本无法让

Vue.$noClientConf

工作。相反，我只是创建了一个默认对象

console.clear（）
常量默认值={
“cmp_名称”：“无客户”，
“cmp_标题”：“客户选择”，
'url'：'ajax/getclients.php'，
“父级”：null，
“opt_texte”：“NomClientFR”，
“选择权”：“无客户”，
“cmp\u最大选项”：3，
“opt_custom”：null，
“数据大小”：10，
“数据样式”：“btn btn默认btn sm”，
“数据实时搜索”：“真”
};
组件（“flex select”{
道具：{
cmp_名称：{
类型：字符串，
必填项：true
},
cmp_标题：{
类型：字符串，
必填项：true
}
},
模板：`
{{cmp_name}{{cmp_title}}
`
})
新Vue({
el:“应用程序”，
数据：{
默认值
}
})

{{defaults}}

如果要使用，最好的做法是使用

例如：

示例组件所需的对象输入组件：

const obj={
区块1：{
图标：“示例”，
标题：“示例”，
内容：“示例”
},
区块2：{
图标：“示例”，
标题：“示例”，
内容：“示例”
}
};

具有自定义验证程序的组件：

导出默认值{
名称：“ExampleComponent”，
道具：{
数据：{
类型：对象，
验证器：（o）=>{
常量集=新集（）；
set.add（！！（o.block1&&o.block1.icon&&typeof o.block1.icon=='string'）；
set.add（！！（o.block1&&o.block1.title&&typeof o.block1.title=='string'）；
set.add（！！（o.block1&&o.block1.content&&typeof o.block1.content=='string'）；
set.add（！！（o.block2&&o.block2.icon&&typeof o.block2.icon=='string'）；
set.add（！！（o.block2&&o.block2.title&&typeof o.block2.title=='string'）；
set.add（！！（o.block2&&o.block2.content&&typeof o.block2.content=='string'）；
return！set.has（false）；
},
},
颜色：{
类型：字符串，
验证器：值=>['black'，'white'].包括（值），
},
},
};

Vue的未缩小版本不知道自己的名称，因此您可能希望查看本文以了解解决方案。除此之外，您的解决方案非常有效。谢谢：）

props: {
        config.cmp_name: {
            type:String,
            required: true
        },
        config.cmp_title:{
            type:String,
            required: true
        }
    }

<flex-select ref="NoClient" v-bind="defaults"></flex-select>

props: {
  cmp_name: {
    type:String,
    required: true
  },
  cmp_title:{
    type:String,
    required: true
  }
}

props:{
  conf: {
    validator(config){
      let cmp_name = config.cmp_name && typeof config.cmp_name === "string"
      let cmp_title = config.cmp_title && typeof config.cmp_title === "string"
      return cmp_name && cmp_title
    }
  }
}