Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候,它就变成了那个组件实例的一个属性。
从这句话上面我们能看出两点
1、prop是写在组件上的。
2、把父组件的一个值传给子组件时,这个值通过prop转化成了这个子组件实例的一个属性。
静态传值:
<script>
//第二步: 注册一个全局组件
Vue.component('props-component', {
// 在这个组件上声明props
props:['title'],
template:`
<div>{{title}}</div>
`
});
// 第一步:声明Vue
var app = new Vue({
el:'#app'
});
</script>
<div id="app">
<!-- 第三步:使用组件 -->
<props-component title="props so easy"></props-component>
</div>
动态传值:
let vm = new Vue({
el:'#app',
data:{
}
});
Vue.component('my-header', {
props:['lists'],
template:`
<header>
<ul>
<li>{{lists}}</li>
</ul>
</header>
`
})
let vm = new Vue({
el:'#app',
data:{
headerList:'首页'
}
});
<my-header :lists="headerList"></my-header>