Vue组件之间传值

父传子

1. 在父组件中引用子组件
2. 在引入组件的地方绑定属性传递父组件数据
3. 在子组件里使用props接收父组件数据

<!-- 父组件 -->
<template>
  <div class="fu">
    <zi :msg="msg" :other="other"></zi>
  </div>
</template>

<script>
import zi from './zi'
export default {
  components: {
    zi,
  },
  data() {
    return {
      msg: '父组件数据',
      other: '父组件其他数据',
    }
  },
}

<!-- 子组件 -->
<template>
  <div class="zi"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  // props: ['msg', 'other'], //简单语法
  props: {
    // 检测类型
    other: Number,
    // 检测类型 + 其他验证
    msg: {
      type: String,
      default: '',
      required: true,
      validator: function (value) {
        return value.length >= 2
      },
    },
  },
}
</script>

子传父

1. 在父组件中引用子组件
2. 在引入组件的地方绑定一个自定义事件
3. 在子组件里使用emit触发事件，将子组件的数据作为参数传递给父组件，触发父组件的自定义事件接收

<!-- 父组件 -->
<template>
  <div class="fu">
    <zi @childFn="parentFn"></zi>
    {{ message }}
  </div>
</template>

<script>
import zi from './zi'
export default {
  components: {
    zi,
  },
  data() {
    return {
      message: '',
    }
  },
  methods: {
    parentFn(payload) {
      this.message = payload
    },
  },
}
</script>

<!-- 子组件 -->
<template>
  <div class="zi">
    <input type="text" v-model="msg" />
    <button @click="click">触发</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '子组件的数据',
    }
  },
  methods: {
    click() {
      this.$emit('childFn', this.msg)
    },
  },
}
</script>

兄弟组件间传值

1. 创建一个js文件mid.js，在vue组件中引入即可

// mid.js
import Vue from 'vue'
export default new Vue()

2. 在传递数据的vue组件中引入刚才的js，并在methods里边定义一个函数，调用此函数触发，将需要传递的数据作为参数

// brother1.vue
import mid from '@/mid.js'
export default {
  data() {
    return {
      msg: '谁在称无敌，哪个敢言不败？帝落时代都不见！',
    }
  },
  methods: {
    touch() {
      let that = this
      mid.$emit('deliver', that.msg)
    },
  },
}

3. 在接收数据的vue组件引入此js，然后在created生命周期中监听并接收数据

// brother2.vue
import mid from '@/mid.js'
export default {
  data() {
    return {
      message: '',
    }
  },
  created() {
    mid.$on('deliver', (msg) => {
      this.message = msg
    })
  },
}

其他方案

1. provide / inject
   这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效

// 祖先组件提供msg
export default {
  data() {
    return {}
  },
  provide () {
    return {
      msg: 'OK'
    }
  }
}

// 子孙后代组件注入msg
export default {
  inject: ['msg'],
  created () {
    console.log(this.msg) // OK
  }
}

2. 使用 $children 获取子组件对象

//父组件 fa.vue
let child = this.$children[0]

3. 使用 $ref 获取指定的子组件对象

//父组件 fa.vue
<zi ref='ziCom'></zi>
let child = this.$refs.ziCom

4. 使用 $parent 获取父组件对象

mounted() {
  let father = this.$parent
}

5. vuex