共计 1883 个字符，预计需要花费 5 分钟才能阅读完成。
校园的朝霞
前言
学 vue 必须要会的就是组件这玩意啦，不然可能就约等于白学。
我本人后期实现老师安排的工作，不瞒你说，交上去，间接被骂，起因就是我一个组件没抽😂（一边学，一边敲，没想那么多，只想着实现）。
一个小小页面，1163 行（捂脸）。
而后就下定决心来好好整 vue 组件，其实我感觉还蛮好玩的。接下来就让咱们看看组件必会的 props
理解这个之前肯定得懂点组件根底哈。
介绍
vue.js 文档在 props 这节真就是间接上手，把我当大佬
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内间接援用父组件的数据。父组件的数据须要通过 prop 能力下发到子组件中。
也就是说 props 是子组件拜访父组件数据的惟一接口。即咱们想要动静的传递数据给子组件的话，子组件中必须有 props 才行。
如果子组件想要渲染父组件的元素，那么就必须要在 prop 中申明一个变量才行, 这个变量就能够援用父元素的数据，而后就能够进行渲染。
根本用法
咱们写了一个小组件 demo，而后在 App 中援用
<template>
<div>
<p> 子组件 demo</p>
<h1>{{message}}</h1>
</div>
</template>
<script>
export default {props: ['message']
}
</script>App 里的
<template>
<div class="todo-container">
<Demo ></Demo>
</div>
</template>
<script>
import Demo from './components/Demo'
export default {
components: {Demo}
}
</script>初始化成果
那行 <h1>{{message}}</h1> 并没有展现进去。
子组件尽管曾经接管，然而咱们要如何在 App 组件中传值勒？
<!-- :message 对应的是子组件 prop 中接管变量的名称
"message" 对应的父组件中 data 中定义的数据
-->
<Demo :message="message"></Demo>data () {
return {message: 'hello'}
}接下来咱们再看看子组件有没有被渲染
曾经是渲染胜利啦。
另外在子组件接管 props 时，我上述的形式是最简略的，实践上接管时该当指定类型，因为 JavaScript 是一门弱语言。
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}这就是最根本的父组件传递给子组件数据的形式啦。
Props 的单向性（重点）
留神：当父组件的属性值变动，子组件也会立马随之变动，然而反过来并不会如此。
另外，不要尝试在子组件外部扭转 Prop 接管到的值，这么做当值为对象时，能够胜利，然而这是违反规定的，管制台上 vue 也会给出正告
然而咱们难免会有要在子组件批改值的时候，那么有什么办法勒？
1、第一种：
父元素通过 prop 传递了一个初始值，而咱们在子组件中心愿之后都把它当作一个本地的 prop 数据来应用。这种状况咱们通常会在子组件中的 data 区域定义一个变量并将值赋给它。
props: ['message'],
data: function () {
return {msg: this.message}
}2、第二种：计算属性
官网例子：
props: ['size'],
computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}
}留神：在 JavaScript 中对象和数组是通过援用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中扭转变更这个对象或数组自身 将会 影响到父组件的状态。这是不被倡议的
如下列这种即是违反规定的：
有错的不是 v-model 哈，而是咱们没把 prop 用好哈。
小结
通过 prop 父组件能够传递数据给子组件，使得子组件能够做到被屡次复用。
剩下的文章，咱们就是想想如何让子组件返回数据给父组件，父子组件、祖孙组件、兄弟组件是如何通信的啦，又是如何给子组件绑定事件的啦。
继续更新中，咱们一起提高。
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。