props传递对象_props传递数据

一.传递数据

1.props 传入单数据

就像 data 一样，prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用

{ {title}}

Vue.component('child', {//声明 props

props: ['message'],

template:'{ { message }}'})

exportdefault{

name:'app',

data:function() {return{

title:'使用 Prop 传递数据'}

}

}

2.props 传入多个数据

如果在父组件的模板类添加其他元素或者字符会有：

①在最前面加入—每个子组件渲染出来都会在其前面加上

②在最后面加入—每个子组件渲染出来都会在其后面加上

③在中间加入—他前面子组件后面加上，后面的子组件后面加上

(1)1种

Vue.component('child', {

props: ['msg','nihao','nisha'],

template:'{ { msg }}{ {nihao}}{ {nisha}}',

});

exportdefault{

name:'app',

data:function() {return{

}

}

}

(2)2种

template: '小明，{ { msg }}{ {nihao}}{ {nisha}}',

(3)3种

template: '{ { msg }}{ {nihao}}{ {nisha}}小明',

(4)4种

template: '

{ { msg }}小明      { {nihao}}      { {nisha}}小林

&