「后端小伙伴来学前端了」关于 Vue中的 props

校园的晚霞

前言

学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 父组件可以传递数据给子组件，使得子组件可以做到被多次复用。

剩下的文章，咱们就是想想如何让子组件返回数据给父组件，父子组件、祖孙组件、兄弟组件是如何通信的啦，又是如何给子组件绑定事件的啦。

持续更新中，我们一起进步。

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望：我们，待别日相见时，都已有所成。