vue.jpg

一、父组件给子组件传递值

①父组件向子组件传值

定义父组件，父组件传递menuList这个数值给子组件

<template>
  <div>
    <!-- 通过:绑定需要传递是一个数组 -->
    <Child :menuList="menuList" />
  </div>
</template>

<script>
// 引入子组件
import Child from '../Other/Child';
export default {
  data() {
    return {
      menuList: ['首页', '用户管理', '视频管理', '订单管理']
    };
  },
  components: {
    Child
  }
};
</script>

<style lang="scss" scoped></style>

②子组件通过props接收父组件传递过来的值

定义子组件，子组件通过 props方法获取父组件传递过来的值

<template>
  <div class="box" style="color:blue">
    <!-- 拿到父组件传递过来的值可以直接遍历输出 -->
    <span v-for="item in menuList" :key="item">{{ item }}</span>
  </div>
</template>

<script>
export default {
  // 通过props接收父组件传递过来的值
  // menuList为父组件需要传递过来的值得名称
  // type为指定父组件传递数据的类型
  // default为默认为空
  props: {
    menuList: {
      type: Array,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 300px;
  display: flex;
  justify-content: space-around;
}
</style>

二、子组件给父组件传递值

①子组件向父组件传值通过$emit

一般需要触发绑定事件进来传值

<template>
  <div>
    <!-- 通过点击事件给父组件传递值 -->
    <button @click="handleClick">传递给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arrList: ['java', 'PHP', 'vue', 'react']
    };
  },
  methods: {
    handleClick() {
      // event-child：自定义事件不支持驼峰
      // this.arrList：需要传递的值
      this.$emit('event-child', this.arrList);
    }
  }
};
</script>

<style lang="scss" scoped></style>

②父组件通过@event-child监听子组件传递过来的值

val为子组件传递给父组件的值

<template>
  <div>
    <!--@event-child:子组件自定义事件  -->
    <Child @event-child="handleParent" />
  </div>
</template>

<script>
// 引入子组件
import Child from '../Other/Child';
export default {
  data() {
    return {};
  },
  components: {
    Child
  },
  methods: {
    handleParent(val) {
      //val为子组件传递过来的数据
      console.log(val); //输出子组件传递给父组件的值
    }
  }
};
</script>

<style lang="scss" scoped></style>

①this.$children 获取子组件data中的数据

②this.$parent 获取父组件data中的数据

③this.$refs 获取子组件data中的数据

1.父组件直接获取子组件中data中的数据可以直接使用

①this.$children[0]获取到子组件data中的数据或者

②this.$refs.child.arrList获取子组件data中的数据

2.子组件直接获取父组件data中的数据可以直接使用

③this.$parent获取到父组件data中的数据

<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {
      arrList: ['java', 'PHP', 'vue', 'react']
    };
  },
  mounted() {
    console.log(this.$parent.parent); //我是父组件
  }
};
</script>

<style lang="scss" scoped></style>

<template>
  <div><Child  ref="child"/></div>
</template>

<script>
// 引入子组件
import Child from '../Other/Child';
export default {
  data() {
    return {
      parent: '我是父组件'
    };
  },
  components: {
    Child
  },
  mounted() {
    console.log(this.$children[0].arrList.toString()); //java,PHP,vue,react
    console.log(this.$refs.child.arrList.toString()); //java,PHP,vue,react
  }
};
</script>

<style lang="scss" scoped></style>

三、非父子组件间的传值

事件总线，建立一个公共的js文件，用来传递消息

在utils下新建一个bus.js文件

import Vue from 'vue';
export default new Vue();

<template>
  <div>
    <child />
    <button @click="busPass">传递</button>
  </div>
</template>

<script>
import bus from '../../utils/bus';
import child from '../Other/Child';
export default {
  data() {
    return {
      arrList: ['java', 'js', 'vue']
    };
  },
  methods: {
    busPass() {
      // child:自定义名称
      bus.$emit('child', this.arrList);
    }
  },
  components: {
    child
  }
};
</script>

<style lang="scss" scoped></style>

使用$on监听

如果只需要监听一次使用$once

<template>
  <div>
    <span v-for="item in childList" :key="item">{{ item }}</span>
  </div>
</template>

<script>
// 引入bus.js
import bus from '../../utils/bus';
export default {
  data() {
    return {
      childList: []
    };
  },
  created() {
    this.getBusList();
  },
  methods: {
    getBusList() {
      // 使用$on监听
      bus.$on('child', val => {
        this.childList = val; //将获取的值赋值给data中的childList
        console.log(val);
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>

本次就分享到这里，喜欢的关注支持，期待后期更多丰富内容