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

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

html:

<div id="app">
	<child v-bind="msg"></child>
</div>

js:

Vue.component("child",{
    props:["aaa","obj"],
    template:"<h1>{{aaa}}\
          {{obj}}</h1>"
    });
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：

<div id="app">
	<child  v-bind:say="sayname" v-bind="msg"></child>
</div>

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

Vue.component("child",{
		template:"<h1>\
		{{obj}}\
		{{aaa}}\
		{{say}}</h1>",
		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:"<h1>\
		{{obj}}\
		{{aaa}}\
		{{say}}</h1>",
		props:["aaa","obj","say"]
	});