一.生命周期的区别
1.在生命周期上变化不是很大，可以说vue2的话生命周期是可以直接使用的，但是vue3的话是需要先引入在使用的,而且要在前面加on.
vue2的生命周期有那些？
- beforeCreate----created
- beforeMount----mounted
- beforeUpdate----updated
- beforeDestory---destoryed
- activited-----deactivited
vue3的生命周期有那些？
- setup---组件创建时调用
- onBeforeMount--onMpunted---挂载在DOM时运用
- onBeforeUpdate--onUpdated 响应数据修改时运用
- onBeforeUnmount--onUnmounted--元素销毁前执行
- onActivated--onDeactivated 管理keeo-alive组件
- onErrorCaptured----每当事件处理程序或生命周期钩子抛出错误时
二.组件传值的区别
vue2的组件传值方式有哪些？
| 组件传值方式 | 方法 |
|---|---|
| 父子穿传值 | 父组件给子组件标签行定义属性，子组件通过props来进行接收 |
| 子父传值 | 子组件通过触发$emit事件给父组件传值 |
| 兄弟组件传值 | 使用第三方bus文件使用bus.$emit传值 bus.$on来接收(eventBus) |
常见的父子传值还有 $ref $children
-
ref 用于给元素或子组件注册引用信息，引用信息将会注册在父组件的 refs对象上，父组件通过refs对象上，父组件通过ref 获取到在子组件里定义的属性和方法，通过调用方法给子组件传递数据
-
children为当前组件的直接子组件，是一个无序的数组，父组件通过 children 访问子组件并传递数据，$ children 并不保证顺序，也不是响应式的，如果能清楚的知道子组件的顺序，可以使用下标来操作对应的子组件
子父组件传值详细一点就是子组件通过触发
$emit事件给父组件传值，$emit该事件有两个参数第一个是自定义事件第二个是要传递的值，需要注意的地方是子组件上面自定义的事件是从子组件传过来的.**
eventBus 就是一个vue实例来作为全局的事件总线，兄弟组件之间通过 eventBus.on和eventBus.emit 注册触发事件来传递数据.**
常见的子父传值还有 $parent
- $parent 可以用来从一个子组件访问父组件并传递数据
<template>
<div>
<p>我是第一个儿子</p>
<input type="text" placeholder="我是第一个儿子的值" :value="fatherMessage" @input="getSonValue" />
<button @click="toParent">点击实现子传父</button>
{{aa}}
</div>
</template>
<script>
import bus from "../utils/bus";
export default {
props: ["fatherMessage"],
data() {
return {
inputValue: "",
aa: ""
};
},
methods: {
getSonValue(e) {
console.log(e.target.value);
this.inputValue = e.target.value;
},
toParent() {
this.$emit("toParent", this.inputValue);
}
},
created() {
bus.$on("sendOneSon", val => {
this.fatherMessage = val;
});
}
};
</script>
<template>
<div>
<p>我是第二个儿子</p>
<input type="text" placeholder="我是第二个儿子里面的内容" v-model="sonTwoValue" />
<button @click="sendOneSon">点击我可以给第一个儿子传值</button>
</div>
</template>
<script>
import bus from "../utils/bus";
export default {
data() {
return {
sonTwoValue: "888888"
};
},
methods: {
sendOneSon() {
bus.$emit("sendOneSon", this.sonTwoValue);
}
}
};
</script>
//bus文件(兄弟组件传值的时候会用得上)
import Vue from "vue";
export default new Vue();
<template>
<div>
<p>我是父组件</p>
<input type="text" placeholder="请输入父组件里面的值" v-model="fatherValue" />
<button @click="sendFatherFun">点击实现父子传值</button>
<sonOne :fatherMessage="clickValue" @toParent="getSon"></sonOne>
<sonTwo></sonTwo>
</div>
</template>
<script>
import sonOne from "../components/sonOne.vue";
import sonTwo from "../components/sonTwo.vue";
export default {
components: { sonOne, sonTwo },
data() {
return {
fatherValue: "",
clickValue: ""
};
},
methods: {
sendFatherFun() {
this.clickValue = this.fatherValue;
console.log(this.clickValue);
},
getSon(val) {
this.fatherValue = val;
}
}
};
</script>
vue3的组件传值方式有哪些？
- 1.父子传值
父组件自定义属性传递给子组件，子组件通过引入defineProps来进行接收
1. <!-- 父组件通过:变量(这里是info)绑定值 -->
1. <Child :info="parentMsg"></Child>
import { toRefs, defineProps } from 'vue'
const props = defineProps({
//子组件接收父组件传递过来的值
info: String,
})
//使用父组件传递过来的值
const {info} =toRefs(props)
- 2.子父传值
子组件引入defineEmits用来传递方法，在该方法里面进行操作，使用emit来进行传值,父组件接收方法和vue2一样
<template>
<button @click="clickChild">点击子组件</button>
</template>
<script setup>
import { defineEmits } from 'vue'
// 使用defineEmits创建名称，接受一个数组
const emit = defineEmits(['clickChild'])
const clickChild=()=>{
let param={
content:'b'
}
//传递给父组件
emit('clickChild',param)
}
</script>
