vue组件:props传值
Posted YaoJunLuo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue组件:props传值相关的知识,希望对你有一定的参考价值。
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>
以上是关于vue组件:props传值的主要内容,如果未能解决你的问题,请参考以下文章