目录

1.vue2注册子组件

2. vue2组件传值父传子

3. vue2组件传值子传父

---

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>