对象作为 props 传递所有的属性理解

aaa asdf   我的输入法坏了   O(≧口≦)O 这句话还是在Windows里面编辑好剪切过来的,今天说一下刚探索出来的对象作为 props 传递所有的属性's example ,代码还是新鲜的,look when it's hot.........:

html:


js:

Vue.component("child",{
    props:["aaa","obj"],
    template:"

{{aaa}}\ {{obj}}

" }); new Vue({ el:"#app", data:{ msg:{ obj:"hello world", aaa:"bbb" } } })
 父组件传入的对象props,在子组件中既可以用数组的方法接受,也可以用对象的方法接收。v-bind只接收父组件传入的对象名,或者拆分成:v-bind:obj="msg.obj" 和

v-bind:aaa="msg.aaa".


-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o哈哈哈不萌萌哒分割线-o-o-o-o-o-o-o-o-o--o-o-o-o-o-o

父组件也可以继续向子组件动态传入数据,比如新传入一个sayname:


子组件中以对象的方法接收时,父组件传入的msg对象由子组件接收时拆分成对象形式:

Vue.component("child",{
		template:"

\ {{obj}}\ {{aaa}}\ {{say}}

", props:{ obj:{ type:String, default:"" }, aaa:{ type:String, default:"" }, say:{ type:String, default:"" } } }); new Vue({ el:"#app", data:{ msg:{ obj:"hello world", aaa:"bbb" }, sayname:"good evening" } })
也可以用数组的方式接收:

Vue.component("child",{
		template:"

\ {{obj}}\ {{aaa}}\ {{say}}

", props:["aaa","obj","say"] });

你可能感兴趣的:(Vue)