vue 听说你很会传值？

前置

大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白。如有错误，欢迎指正。

温馨提示: 下文没有列出 vuex, vuex 也是重要的组件通讯方式。

props

• 最常用的组件通讯方式
• 值可以是数组或对象，使用对象时可以配置高级选项，如类型检测、自定义验证和设置默认值
• 方向：父 -> 子

Son.vue

export default {
  props: {
    text: {
      type: String,
      required: true,
    },
  },

  mounted() {
    console.log(this.text) // 我是父组件提供给子组件的值
  },
}

App.vue

$refs

• 常用的方式
• 返回注册过 ref 特性的所有 DOM 元素和组件实例
• 可以用来操作 DOM
• 可以用来传值
• 方向：子 -> 父

Son.vue

export default {
  methods: {
    sonFunc() {
      console.log('我是子组件的值')
    },
  },
}

App.vue

控制台打印: 我是子组件的值

$emit

• $emit 用来触发当前实例上的事件
• 方向：父 -> 子
• 参数一：来触发的当前实例上的事件函数
• 参数二：附加参数，传给监听器回调

Son.vue

export default {
  mounted() {
    this.$emit('customFunc', '我是子组件传给父组件的值')
  },
}

App.vue

@update

• 需要配合 .sync 使用
• 与上面的 $emit 写法类似
• 不同之处在于$emit 的第一个参数不在是当前实例上的事件函数
• 方向：子 -> 父

Son.vue

export default {
  mounted() {
    this.$emit("update:text", '我是子组件传给父组件的值')
  }
}

App.vue

接下来看下面的写法，上面这种写法是对如下方式的简写, 或者称之为语法糖。可以不借助 .sync。

Son.vue

export default {
    mounted () {
        this.$emit('update:text','我是子组件传给父组件的值')
    }
}

App.vue

 

 import Son from "./components/dispatch/Son"
 export default {
  mounted() {
    console.log(this.value) // 我是子组件传给父组件的值
  }
}

v-model

• v-model 常用来给 input 实现双向数据绑定
• v-model 也可以用来传值
• 有局限性，只能传 input value

等价于：

接下来看如何通过 v-model 传值。

Son.vue

App.vue

$parent $childred

• $parent: 父实例，如果当前实例有的话
• $children: 当前实例的直接子组件
• $parent $childred 通过封装可以实现不同方向的传值

$children 并不保证顺序，也不是响应式的。可以使用一个数组配合 v-for 来生成子组件，使用 Array 作为真正的来源。

App.vue

export default {
  data() {
    return {
      value: '我是父组件的值',
    }
  },

Son.vue

export default {
  mounted: {
      console.log(this.$parent.value) // 我是父组件的值
      this.$parent.value = 666
      console.log(this.$parent.value) // 666
  },
}

简单封装一下即可实现$parent 配合 $emit 实现跨级向上传值。

main.js

Vue.prototype.$dispatch = function(event, value) {
  let parent = this.$parent
  while (parent) {
    parent.$emit(event, value)
    parent = parent.$parent
  }
}

这样使用: this.$dispatch('event',value)

简单封装一下即可实现$children 配合 $emit 实现向下传值。

Vue.prototype.$broadcast = function(event, value) {
  const broadcast = children => {
    children.forEach(child => {
      child.$emit(event, value)
      if (child.$children) {
        broadcast(child.$children)
      }
    })
  }
  broadcast(this.$children)
}

这样使用: this.$broadcast('event',value)

$attrs

• 获取父组件通过 v-bind 传过去的所有值
• class 和 style 除外
• 可以通过 v-bind="$attrs" 传入内部组件
• 只能在