vue父子组件之间的传值方法

父子组件通信：
！三要素 *
props
slot
$emit

event
attribute
native修饰符
$listeners
v-model、sync修饰符
$parent和$children
ref

跨组件通信
provide和Inject
router
vuex
eventbus

---

prop
由父组件传递到子组件。

event
由子组件通知到父组件。

attribute
子组件没有声明的属性，父组件多传递的属性会附着在子组件根元素上，通过$attrs获取。子组件可以通过inheritAttes：false,就不会附着在根元素上，但不会影响$attrs。

native修饰符
将事件直接附着在子组件根元素上。

**$listeners\ast \ast 子组件可以通过$listeners获取父组件传递的所有事件处理函数。

v-model、sync修饰符
v-model实现双向数据绑定。
sync修饰符作用与v-model类似，弥补v-model只针对一个数据进行实现数据绑定的缺陷。在Vue3中被移除。

$parent和$children
获取当前组件的父组件和子组件的实例

$slots和$scopedSlots
通过插槽传递数据。

ref
父组件中得到子组件实例。

跨组件通信

provide和Inject
父组件通过provide提供数据，后代组件提供inject声明用到的数据。

router
组件改变了地址栏，其他组件就可以监听地址栏的变化做出相应的操作。

vuex
数据仓库

eventbus
组件通知事件总线某件事，事件总线会通知监听该事件的所有组件。

---

实际案列如下：

父传子
父组件对子组件传递参数，子组件需要用到props来接收参数。

一般使用：以字符串的形式列出prop,或者指定prop类型

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
// OR
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

但是通常在项目开发中，我们需要对组件的prop进行验证。通常你知道这些prop的类型，只要有一个验证需求没有被满足，就会报错。在团队开发中，这很重要。

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      //对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
''''

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。


1、父子组件间数据的传递
（1）父组件给子组件传递数据通过props进行声明**

父组件

//父组件<template>

  <div>
    <el-button @click="click">点击调用子组件中的函数</el-button>
    <Son ref="son" :fatherData='outputVal'/>//绑定需要传递的数据
  </div>
</template>

<script>
import Son from "./son";
export default {
  name: "father",
  data() {
    return {
      outputVal:'这是父组件传递给子组件的数据' //增加代码
    };
  },
  components:{
    Son
  },
  methods: {
    click() {
      this.$refs.son.textShow();
    }
  }
};
</script>

<style>
</style>


**子组件**
//子组件<template>
  <div>
    <p v-if="!!show">我的方法被父组件调用了</p>
    <p>{{fatherData}}</p>//输出父组件传过来的数据
  </div>
</template>

<script>
export default {
  name:'Son',
  data(){
    return{
      show:false
    }
  },
  props:{ //使用props声明要接收的值
    fatherData:{　　　　type:String ,//定义接收数据的类型若类型不符合将会在控制台输出错误　　　　default:''//定义默认值，当父组件没有传递数据时，会使用默认值　　}
  },
  methods:{
    textShow(){
      this.show=!this.show
    }
  }
}
</script>

<style>

</style>





**（2）、*子组件向父组件传递数据
$emit的理解：当我们点击按钮，子组件便会分发一个名为output的事件，父组件中使用函数接收该事件传递的数据。**

**父组件**

<template>
  <div>
    <p>{{initVal}}</p>
    <Son ref="son" :fatherData='outputVal' @ouput='getSonVal'/>
  </div>
</template>

<script>
import Son from "./son";
export default {
  name: "father",
  data() {
    return {
      initVal:'这是父组件自身的值'
    };
  },
  components:{
    Son
  },
  methods: {
    getSonVal(val){
      this.initVal=val
    }
  }
};
</script>

<style>
</style>

**子组件**

<template>
  <div>
    <el-button @click="ouputToFather">子组件中的按钮</el-button>
  </div>
</template>

<script>
export default {
  name: "Son",
  data() {
    return {
      outSonVal:'我是子组件传递给父组件的数据'
    };
  },
  methods: {
    ouputToFather(){
      this.$emit('ouput',this.outSonVal)//分发名为output的事件，将outSonVal的值发送出去
    }
  }
};
</script>

<style>
</style>