校园的朝霞
前言
学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 父组件能够传递数据给子组件，使得子组件能够做到被屡次复用。
剩下的文章，咱们就是想想如何让子组件返回数据给父组件，父子组件、祖孙组件、兄弟组件是如何通信的啦，又是如何给子组件绑定事件的啦。
继续更新中，咱们一起提高。
后语
大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。