web学习笔记（七十一）-CSDN博客

本文链接：https://blog.csdn.net/shan33__/article/details/140004844

1.vue2注册子组件

vue2注册子组件和vue3不使用setup语法糖注册子组件是一样的，都需要通过components来注册子组件。

<template>
  <div class="about">
    <h1>关于</h1>
    <sub1></sub1>
  </div>
</template>
<script>
import sub1 from "@/components/sub.vue";
export default {
  name: "HomeViem",
  //   注册子组件
  components: {
    sub1,
  },
};
</script>

2. vue2组件传值父传子

在标签内写入要从父页面传到子页面的数据，此时默认传递的数据都是字符串类型的，如果需要传递其他类型的数据（数字、数组、对象等）可以用v-bind进行数据绑定后再传递数据。

<template>
  <div class="about">
    <h1>关于</h1>
    <suba :a="a" :b="b" :c="c" d="1000"></suba>
  </div>
</template>
<script>
import suba from "@/components/suba.vue";
export default {
  name: "HomeViem",
  //   注册子组件
  components: {
    suba,
  },
  data() {
    return {
      a: 30,
      b: 50,
      c: [1, 2, 3],
    };
  },
};
</script>

然后在子组件中需要用props来接一下父组件传过来的数据。然后就可以在代码中使用数据，之前vue3我们如果需要在js代码中用父组件的数据还需要通过props打点调用对应的属性，而在vue2中可以和页面的自定义变量一样直接使用。

<template>
  <div>
    <h3>sub</h3>
    <p>{{ a }}</p>
    <p>{{ b + 5 }}</p>
    <p>{{ c }}</p>
    <p>{{ d }}</p>
    <button @click="adddata1">改变data1</button>
    <p>{{ data1 }}</p>
  </div>
</template>
<script>
export default {
  name: "sub00",
  props: ["a", "b", "c", "d"],
  data() {
    return {
      data1: 100,
    };
  },

  methods: {
    adddata1() {
          this.data1 = this.a;
    },
  },
};
</script>
<style lang="less" scoped></style>

注意： vue是单向数据流，不管是vue2还是vue3，子组件都不能修改父组件传过来的值。

3. vue2组件传值子传父

vue2可以通过自定义事件来实现子传父的效果，首先我们需要在父组件页面给子组件标签设置自定义事件，然后将触发自定义事件后执行的事件给执行出来。然后在子组件通过this.$emit来执行对应的自定义事件。

父组件参考代码

<template>
  <div class="about">
    <h1>关于</h1>
    <suba :a="a" :b="b" :c="c" d="1000" @setdata="getdata"></suba>
  </div>
</template>
<script>
import suba from "@/components/suba.vue";
export default {
  name: "HomeViem",
  //   注册子组件
  components: {
    suba,
  },
  data() {
    return {
      a: 30,
      b: 50,
      c: [1, 2, 3],
    };
  },
  methods: {
    getdata(val) {
      console.log(val);
    },
  },
};
</script>

子组件参考代码：

<template>
  <div>
    <h3>sub</h3>
    <button @click="adddata1">adddata1</button>
    <p>{{ data1 }}</p>
  </div>
</template>
<script>
export default {
  name: "sub00",
  props: ["a", "b", "c", "d"],
  data() {
    return {
      data1: 100,
    };
  },

  methods: {
    adddata1() {
          //   触发自定义事件
    this.$emit('setdata',100);
    },
  },
};
</script>
<style lang="less" scoped></style>