玩之前创建一个 父组件 和 一个子组件 ，祝您玩的开心，整理了3多个小时，码字不易。
1、props传递数据
在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用props来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 $emit
// Parent.vue 传送<template><child :msg="msg"></child></template>// Child.vue 接收export default {// 写法一 用数组接收props:['msg'],// 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等props:{msg:{type:String,default:'这是默认数据'}},mounted(){console.log(this.msg)},}
2、v-model
和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据
// 父组件组件 这个是 v-model:obj="value"<template><div class=""><HelloWorld v-model:obj="value"></HelloWorld>{{ value }}</div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {value: "我是Home里的数据 响应式的",};},components: { HelloWorld },};</script>// 子组件<template><input :value="obj" @input="handlerChange" /></template><script>export default {props: ["obj"],// 可以修改事件名，默认为 inputmodel: {event: "updateValue",},methods: {handlerChange(e) {// 如果有上面的重命名就是这样this.$emit("updateValue", e.target.value);},},};</script>
第二种方式
// 最简单的 v-model实现 父组件 Home <template><div class=""><HelloWorld v-model="value"></HelloWorld>{{ value }}</div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {value: "我是Home里的数据 响应式的",};},components: { HelloWorld },};</script>// 子组件 HelloWorld<template><input :value="value" @input="handlerChange" /></template><script>export default {props: ["value"],methods: {handlerChange(e) {// 一定要是 input 事件this.$emit("input", e.target.value);},},};</script>
3、 .sync
可以帮我们实现父组件向子组件传递的数据 的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
// 父组件 Home<template><div class=""><HelloWorld :val.sync="val"></HelloWorld>{{ val }}</div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {val: "我是Home里的数据 响应式的",};},components: { HelloWorld },};</script>// 子组件 HelloWorld<template><input class="i911-sync" :value="val" @input="handleInput" /></template><script>export default {name: "HelloWorld",props: {val: {type: String,default: "",},},methods: {handleInput(event) {this.$emit("update:val", event.target.value);},},};</script>
4.、ref
ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法
// 父组件<template><div class=""><HelloWorld ref="child"></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {};},mounted() {const child = this.$refs.child;console.log(child.str); // 获取子组件的方法child.fn("调用了子组件的方法");},components: { HelloWorld },};</script>// 子组件<template><input type="text" /></template><script>export default {data() {return {str: "我是数据",};},methods: {fn(e) {console.log(e);},},};</script>
5、$emit / v-on
在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名第二个是参数
// 父组件<template><div class=""><!-- v-on 简写 @ --><HelloWorld @fn="fn"></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {};},mounted() {},methods: {fn(e) {console.log("子传父" + e);},},components: { HelloWorld },};</script>// 子组件<template><input type="text" @blur="fn('我是子组件，可以传参数')" /></template><script>export default {data() {return {};},methods: {// 失去焦点发送fn(e) {this.$emit("fn", e);},},};</script>
6、$attrs / $listeners
多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时
$attrs：包含父作用域里除 class 和 style 除外的非 props属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"
$listeners：包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过 v-on="$linteners"
使用方式是相同的
// 父组件<template><div class=""><HelloWorld :name="name" val="你好s-z-h"></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {name: "父组件数据",};},components: { HelloWorld },};</script>// 子组件<template><div><input type="text" />// 孙组件<SunChild v-bind="$attrs"></SunChild></div></template><script>import SunChild from "./sun-child.vue";export default {data() {return {};},mounted() {console.log(this.$attrs); // 可以拿到父组件传来的数据},components: { SunChild },};</script>// 孙组件export default {mounted() {console.log(this.$attrs);},};
$listeners使用
//parent组件<template><div><Son @eventOne='eventHandler' @click.native='clickHandler'/></div></template><script>export default {methods: {eventHandler() {console.log('触发了Parent中的eventHandler s-z-h')},clickHandler() {console.log('触发了Parent中的clickHandler')}}}</script>//Son组件<template><div>//此时Son组件把从父组件传来的监听器，在传给孙组件<GrandSon v-on='$listerners'/></div></template><script>export default {mounted() {//父组件监听了两个事件，一个eventOne， 一个click，由于click被native修饰了，故$listerners 只有eventOne事件console.log(this.$listerners) //{eventOne: fn}this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数}}</script>//GrandSon组件<template><div>这是孙组件</div></template><script>export default {mounted() {//这样孙组件通过emit触发Parent组件中的监听函数 让后代组件触发祖先组件console.log(this.$listerners) // {eventOne: fn}this.$emit('eventOne') //可以触发Parent组件中的eventHandler函数}}</script>
7、 $children / $parent的使用
$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等
$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等
// 父组件<template><div class=""><HelloWorld></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {name: "父组件数据",};},mounted() {this.$children[0].fn(); // 调用第一个子组件的方法console.log(this.$children[0].name); // 获取第一个子组件中的属性},methods: {fn() {console.log("父组件里的方法 s-z-h");},},components: { HelloWorld },};</script>// 子组件<template><div><input type="text" /></div></template><script>export default {data() {return {name: "我是子里的数据",};},methods: {fn() {console.log("我是子组件方法");},},mounted() {this.$parent.fn(); // 调用父组件的方法console.log(this.$parent.name); // 获取父组件中的属性},};</script>
8、 provide / inject 祖孙之间通信传值
provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的
provide：可以让我们指定想要提供给后代组件的数据或方法
inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用
要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象
// 父组件 Home<template><div class=""><HelloWorld></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {val: "父组件数据",};},provide() {return {name: this.val, // data 的数据someMethod: this.someMethod, // methods 中的方法};},methods: {someMethod() {console.log("这是注入的方法");},},components: { HelloWorld },};</script>// 子组件 HelloWorld<template><div><input type="text" /><SunChild></SunChild></div></template><script>import SunChild from "./sun-child.vue";export default {data() {return {};},inject: ["name", "someMethod"],mounted() {console.log(this.name);this.someMethod();},components: { SunChild },};</script>// 孙组件SunChild 也可以拿数据<script>export default {data() {return {};},mounted() {},inject: ["name", "someMethod"],mounted() {console.log(this.name);this.someMethod();},};</script>
9、EventBus全局事件总线
EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以完成通信
// 找到main.js 加入一下代码 公共的$busVue.prototype.$bus = new Vue()
// 父组件 也可以兄弟a<template><div class=""><HelloWorld></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {};},mounted() {this.$bus.$on("fn", (value) => {console.log(value);});},components: { HelloWorld },};</script>// 子组件 也可以兄弟b<template><div><input type="text" @blur="fn" /></div></template><script>export default {data() {return {};},methods: {fn() {this.$bus.$emit("fn", "可以父子通信，也可以兄弟通信,s-z-h");},},};</script>
10、vuex通信，
可以定义共享的数据源，在哪里都可以访问 安装配置 使用即可
// vuex 里定义共享的数据，在哪个组件都可以访问import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)import vuexPersist from "vuex-persist";export default new Vuex.Store({state: {data: 'vuex 的数据',a: 1,b: 2,},mutations: {},actions: {},modules: {},getters: {num(state) {return state.a + state.b}},})
<template><div class="">{{ data }}{{ num }}</div></template><script>import { mapState, mapGetters } from "vuex";export default {data() {return {};},// 辅助函数computed: { ...mapState(["data"]), ...mapGetters(["num"]) },// 第二种 希望你会举一反三// computed: {// data() {//return this.$store.state.data;// },// },components: {},};</script>
11、具名插槽+作用域插槽 slot
具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。
作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过 v-slot="value" 来接受数据。
// 父组件<template><div class=""><HelloWorld><template v-slot:a="value"><h2>{{ name }}</h2> // 这个是具名插槽<!-- value 是子组件传过来的数据 --><h2>{{ value.value }}</h2> // 这个是作用域插槽</template></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {name: "具名插槽 slot插槽传数据 父传子",};},components: { HelloWorld },};</script>// 子组件<template><div><slot name="a" :value="value"></slot></div></template><script>export default {data() {return {value: "我是子组件数据 作用域插槽子传父 s-z-h",};},methods: {},};</script>
12、 $root
$root可以拿到 App.vue 里的数据和方法
// HelloWorld 子组件添加数据<template><div></div></template><script>export default {data() {return {};},mounted() {// 写入根组件的数据this.$root.foo = 2;},methods: {},};</script>// Home 父组件访问数据<template><div class=""><HelloWorld></HelloWorld></div></template><script>import HelloWorld from "../components/HelloWorld.vue";export default {data() {return {};},mounted() {// 获取根组件的数据console.log(this.$root.foo);},components: { HelloWorld }};</script>
s-z-h 出品
