vue 听说你很会传值？

# 前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是**简单**的例子. 适合像我这样的小白。如有错误，欢迎指正。 > 温馨提示: 下文没有列出 `vuex`, `vuex` 也是重要的组件通讯方式。 # props - 最常用的组件通讯方式 - 值可以是数组或对象，使用对象时可以配置高级选项，如类型检测、自定义验证和设置默认值 - 方向：父 -> 子 **Son.vue** ```js export default { props: { text: { type: String, required: true, }, }, mounted() { console.log(this.text) // 我是父组件提供给子组件的值 }, } ``` **App.vue** ``` ``` # \$refs - 常用的方式 - 返回注册过 `ref` 特性的所有 DOM 元素和组件实例 - 可以用来操作 DOM - 可以用来传值 - 方向：子 -> 父 **Son.vue** ```js export default { methods: { sonFunc() { console.log('我是子组件的值') }, }, } ``` **App.vue** ``` ``` > 控制台打印: 我是子组件的值 # \$emit - `$emit` 用来触发当前实例上的事件 - 方向：父 -> 子 - 参数一：来触发的当前实例上的事件函数 - 参数二：附加参数，传给监听器回调 **Son.vue** ```js 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 "./componentshttps://img.qb5200.com/download-x/dispatch/Son" export default { mounted() { console.log(this.value) // 我是子组件传给父组件的值 } } ``` # v-model - `v-model` 常用来给 input 实现双向数据绑定 - `v-model` 也可以用来传值 - 有局限性，只能传 `input` `value` ``` ``` 等价于： ``` ``` 接下来看如何通过 `v-model` 传值。 **Son.vue** ```js ``` **App.vue** ``` ```  # \$parent \$childred - \$parent: 父实例，如果当前实例有的话 - \$children: 当前实例的直接子组件 - \$parent \$childred 通过封装可以实现不同方向的传值 > `$children` 并不保证顺序，也不是响应式的。可以使用一个数组配合 `v-for` 来生成子组件，使用 `Array` 作为真正的来源。 **App.vue** ```js export default { data() { return { value: '我是父组件的值', } }, ``` **Son.vue** ```js export default { mounted: { console.log(this.$parent.value) // 我是父组件的值 this.$parent.value = 666 console.log(this.$parent.value) // 666 }, } ``` 简单封装一下即可实现`$parent` 配合 `$emit` 实现跨级向上传值。 **main.js** ```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` 实现向下传值。 ```js 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"` 传入内部组件 - 只能在 `