Vue 父子组件间的传值

Vue 为组件开发，在软件开发过程中就避免不了父子组件间传值的问题

那么如何解决父子组件间传值呢？

父组件向子组件传值

<!-- 父组件 -->
<template>
  <div id="base">
    <div>
      <Header :child="parent" />  <!-- parent为父组件要传给子组件的参数名;child为子组件接收的参数名 --> 
    </div>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
export default {
  components: {
    Header,
  },
  props: {},
  data() {
    return {
      parent: false
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

子组件接收传值

子组件接收参数需要在props中

<!-- 子组件 -->
<template>
  <div>
    <div class="nav">
     {{child}} 
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    child: {           // 使用方法与data中的数据用法一致
      type: Boolean,   // type为参数的类型
      defaut: false    // defaut为参数的默认值
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>

子组件向父组件传值

Vue中不支持子组件直接修改父组件中的值，∴我们需要用到$emit()函数

<!-- 子组件 -->
<template>
  <div>
    <div class="nav">
      <van-icon class="btn" name="wap-nav" size="32" @click="changeParent" /> <!-- 通过函数的方式进行传值 --> 
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    show_sidebar: {
      type: Boolean,
      defaut: false
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    changeParent() {
      this.$emit('child', true);    //通过$emit将参数true传值给父组件child对应的函数如：<Header @child="parent" />即将true赋值给child对应的函数parent
    }
  },
};
</script>

父组件接收

<!-- 父组件 -->
<template>
  <div id="base">
    <div>
      <Header @child="parent" />  <!-- parent为父组件接收子组件的方法名;child为子组件的方法名 --> 
    </div>
  </div>
</template>
<script>
import Header from "./components/Header.vue";
export default {
  components: {
    Header,
  },
  props: {},
  data() {
    return {
      parent: false
    };
  },
  computed: {},
  watch: {},
  methods: {
    parent(newShow){
      this.parent= newShow
    }
  },
};
</script>