# **自定义属性props**(数组方式/仅接收)
* 通过给父组件添加自定义属性
* 子组件中通过props接收父组件的自定义属性
* 在模板中通过{{自定义属性名称}}来显示数据
![](https://img.kancloud.cn/b9/f3/b9f3bb9d1ef17c2697c9cdd634f2f490_1653x478.png)
```html
<div id="app" class="container" style="margin-top: 100px;">
<my-alert msg="支付成功"></my-alert>
<my-alert msg="完成交易"></my-alert>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('my-alert',{
props:['msg'],
template:`<div class="alert alert-success" >{{msg}}</div>`
})
var vm = new Vue({
el:'#app',
})
</script>
```