【Vue】了解何为 props ？该如何使用呢 ？

了解何为 props ？该如何使用呢 ？

props

官方文档

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中

通过上面的解析，我们可以得出：props 是子组件访问父组件数据的唯一接口

详细分析即

1. 一个组件可以直接在模板里面渲染 data 里面的数据（双大括号）
2. 子组件不能直接在模板里面渲染父元素的数据
3. 如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据，然后在模板里渲染这个变量（前面的a），这时候渲染出来的就是父元素里面的数据

基本用法

<!--父组件-->
<template>
  <div>
      <hello-world2 :good = "good"></hello-world2> //向子组件传值
  </div>
</template>

<script>
  import helloWorld2 from "./HelloWorld2"  //引用子组件页面

  export default {
    name: "HelloWorld3",
    data() {
      return {
        good: "我是从hello word3传递过来的"
      }
    },
    components: {
      'hello-world2': helloWorld2   //注册子组件
    },
  }
</script>

<!--子组件-->
<template>
    <div>{{good}}</div>
</template>

<script>
  export default {
    props: ['good'], //通过props获取父组件传递过来的值
    data: function () {
      return {}
    },
    methods: {}
  }
</script>

**总结：**父组件通过 v-bind 向子组件传值，子组件通过 props 来获取父组件传递过来的值，被引用的就是子组件

camelCase vs. kebab-case：js中用驼峰式命名，在html中替换成短横线分隔式命名

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>
 
<script>
    Vue.component('child', {
        // 在 JavaScript 中使用 camelCase
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
    })
</script>

单向数据流： props是单向绑定的

• 父组件的属性变化时，将传导给子组件，但是反过来不会
• 每次父组件更新时，子组件的所有 prop 都会更新为最新值

注意：不要在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告

在两种情况下，我们很容易忍不住想去修改 prop 中数据：

1. prop 作为初始值传入后，子组件想把它当作局部数据来用
2. prop 作为原始数据传入，由子组件处理成其它数据输出。

对这👆两种情况，正确的应对方式是👇

定义一个局部变量，并用 prop 的值初始化它：

 props: ['initialCounter'],
    data: function () {
      return { counter: this.initialCounter }
    }

定义一个计算属性，处理 prop 的值并返回：

props: ['size'],
    computed: {
      normalizedSize: function () {
        return this.size.trim().toLowerCase()
      }
    }