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'  // 这里修改的只是自己内部的值，就不会报错了
            },
        }
    }

注：如果不使用 watch 来监听父组件传递的 myName 值，子组件中的 name 值是不会随着父组件的 myName 值进行改变，因为 data 中 name: this.myName 仅仅只是定义了一个初始值。
如果引用类型的值，当在子组件中修改后，父组件的也会修改，因其数据是公用的，其他同样引用了该值的子组件也会跟着被修改。可以理解成父组件传递给子组件的值，就相当于复制了一个副本，这个副本的指针还是指向父组件中的那个，即共享同一个引用。所以除非有特殊需要，否则不要轻易修改。

二、子组件向父组件传值
1、子组件绑定一个事件，通过 this.$emit() 来触发
在子组件中绑定一个事件，并给这个事件定义一个函数

// 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
    methods: {
        //子组件的事件
        changeParentName: function() {
            this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
            // 注：此处事件名称与父组件中绑定的事件名称要一致
        }
    }
}

在父组件中定义并绑定 handleChange 事件

// 父组件
<child @handleChange="changeName"></child>
methods: {
    changeName(name) {  // name形参是子组件中传入的值Jack
        this.name = name
    }
}

2、通过 callback 函数
先在父组件中定义一个callback函数，并把 callback 函数传过去

// 父组件
<child :callback="callback"></child>
methods: {
    callback: function(name) {        this.name = name
    }
}

在子组件中接收，并执行 callback 函数

// 子组件
<button @click="callback('Jack')">改变父组件的name</button>
props: {
    callback: Function,
}

3、通过 children 或 $refs 访问组件实例
这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。

// 子组件
export default {
  data () {
    return {
      title: '子组件'
    }
  },
  methods: {
    sayHello () {
        console.log('Hello');
    }
  }
}
// 父组件
<template>
  <child ref="childRef" />
</template>
<script>
  export default {
    created () {
      // 通过 $ref 来访问子组件
      console.log(this.$refs.childRef.title);  // 子组件
      this.$refs.childRef.sayHello(); // Hello
      // 通过 $children 来调用子组件的方法
      this.$children.sayHello(); // Hello 
    }
  }
</script>
注：这种方式的组件通信不能跨级。