Vue.js 从 html 初始化对象属性

Question

如何从 HTML 中设置组合属性（例如 composed_prop.foo）？

normal_prop 设置好但 composed_prop.foo 设置不好。

示例：

<div id="app">
      <sample normal_prop=1 composed_prop.foo=1 />
</div>


<script>

    Vue.component('sample',{
      props: {
        normal_prop: 0,

        composed_prop: {
            default:{
               foo: 0,
               bar: 0
            }
        }
      }
    })


    new Vue({
        el: "#app"
    })
</script>

Answer 1

你必须这样做：

<div id="app">
     <sample normal_prop=1 :composed_prop="{foo:10, bar:20}" />
</div>

请注意，您必须绑定 composed_prop 以便对表达式求值（而不是将其视为文字字符串）。另请注意，为 composed_prop 传递一个对象将完全覆盖您的默认值 - 它不会尝试将属性与默认值合并。所以，如果你只传入 {foo:10}，那么 composed_prop.bar 将是未定义的。

最后一点……我认为 Object 道具的默认值应该是工厂函数。像这样：

Vue.component('sample',{
  props: {
    normal_prop: 0,

    composed_prop: {
        type: Object,
        default:function(){ // should be a function
            return { foo: 0, bar: 0 };
        }
    }
  }
})

Vue.js 从 html 初始化对象属性

Vue.js initialize object property from html

javascript

vue.js

Vue.js 从 html 初始化对象 属性

Vue.js initialize object property from html

javascript

vue.js

Vue.js 从 html 初始化对象属性