Vue props父组件向子组件传值详解

vue官网上可以说有我们想要的一切,先贴上通过prop传值的官网地址:通过prop向子组件传递数据

Prop是什么?

  Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候,它就变成了那个组件实例的一个属性

  从这句话上面我们能看出两点

  1、prop是写在组件上的。

  2、把父组件的一个值传给子组件时,这个值通过prop转化成了这个子组件实例的一个属性。

  

  不理解第二句话没关系,看下面例子。

基础--静态传值

  1、首先创建一个Vue实例

  2、注册一个组件(这样注册组件的方式是全局注册),还记得我们第一句话吗?prop是在组件上的。因为可以是多个,所以是props。

    在props上声明的是title,在我们的template模板中使用的都是它。

  3、使用组件。

<script>
//第二步: 注册一个全局组件
Vue.component('props-component', {
// 在这个组件上声明props
props:['title'],
template:`
<div>{{title}}</div>
`
});
// 第一步:声明Vue
let vm = new Vue({
el:'#app'
});
</script>
<div id="app">
<!-- 第三步:使用组件 -->
<props-component title="props so easy"></props-component>
</div>

  这只是一个非常简单的静态传值,可在实际中我们几乎不用静态传值。

进阶--动态传值

  我刚学习vue的时候,一直不知道props的流程到底是怎么样的,也就是我是先创建组件,还是先声明一个vue实例等等。流程很重要,

  也可以说这种思想很重要。

  说下我的理解:

  1、首先我们应当知道自己创建的组件里面是什么标签啊之类的。我应用到哪个地方?具体模板应该是什么样子的?

    就像我们上面例子中的这个最简单的模板。

<div>{{title}}</div>

  2、声明组件上的props。

  3、实例上的data值应当和props声明的值对应。

  看下面的例子:

  场景:我想写一个页面的header标签组件。

  

 第一步:

// 第一步:声明Vue
let vm = new Vue({
el:'#app',
data:{ }
});

第二步:这个组件应当长什么样子?

        // 第二步:创建组件
Vue.component('my-header', {
props:['lists'],
template:`
<header>
<ul>
<li>{{lists}}</li>
</ul>
</header>
`
})

第三步:声明headerList(其实熟练的话,这步骤完全省略了)

let vm = new Vue({
el:'#app',
data:{
headerList:'首页'
}
});

第四步:使用组件 :lists="headerList"

    lists是我们在组件中props声明的,headerList是我们在根实例中声明的属性

<my-header :lists="headerList"></my-header>

这样就是一个最简单的组件传值了。

打完收工

上一篇:xdebug远程调试原理分析


下一篇:C#使用CredWrite访问C $