vue组件传值方式

我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。

一、父组件向子组件传值

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

• 在父组件的子组件标签中绑定自定义属性

  // 父组件
  <user-detail :myName="name" />
      
  export default {
      components: {
          UserDetail
      }
      ......
  }

• 在子组件中使用props（可以是数组也可以是对象）接收即可。可以传多个属性。

  // 子组件
  export default {
      props: ['myName']
  }
  ​
  /*
  props: { myName: String } //这样指定传入的类型，如果类型不对会警告
  props: { myName: [String, Number] } // 多个可能的类型
  prosp: { myName: { type: String, requires: true } } //必填的的字符串
  props: { 
      childMsg: { 
          type: Array, 
          default: () => [] 
      }
  }  // default指定默认值
  如果 props 验证失败，会在控制台发出一个警告。
  */

子组件接收的父组件的值分为引用类型和普通类型两种：

　　普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

　　引用类型：数组（Array）、对象（Object）

基于 vue 的单向数据流，即组件之间的数据是单向流通的，子组件是不允许直接对父组件传来的值进行修改的，所以应该避免这种直接修改父组件传过来的值的操作，否则控制台会报错。

• 如果传过来的值是简单数据类型，是可以在子组件中修改，也不会影响其他兄弟组件内同样调用了来自该父组件的值。

  具体操作是可以先把传过来的值重新赋值给data中的一个变量，然后再更改那个变量。

  // 子组件
  export default {
      props: ['myName'],
      data() {
          return {
              name : this.myName    // 把传过来的值赋值给新的变量
          }
      },
      watch: {
          myName(newVal) {
              this.name = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
          }
      },
      methods: {
          changeName() {  
              this.name = 'Lily'  // 这里修改的只是自己内部的值，就不会报错了
          },
      }
  }