先跟大家解析一下Vue2和Vue3的区别。我也在代码里面特别指出。
下图的我就不说了,只能说句尤大大牛皮!!!
- Vue3不强制要求template只有一个根节点
- 父组件定义自定义事件的时候,子组件需要自行声明,才可以调用,否则会报警告。警告不影响使用。
- slot="ha"的写法在Vue3不推荐使用(我这里的话会报错,然后我保存自动帮我改错了,改成了 v-slot:qwe的写法)
- Vue3.0中一个新的配置项,值为一个函数。组件中所用到的:数据、方法等等,均要配置在setup中。之前Vue2的写法就是先在data里面声明,然后定义方法就需要去methods里面定义。然后通过this.去调用。
- Vue2是父组件传递了参数,我子组件只要不用都可以不用声明。Vue3的话就比如Father.vue传递了hobby,我子组件不用hobby,不声明 props: [“hobby”],还会报警告。
<template>
<div>我是Vue3父组件</div>
<!-- 我现在要把我儿子引入进来 -->
<Son @hello="getHello" school="北京大学" hobby="敲代码">
<template v-slot:qwe>
<span>南京大学</span>
</template>
<!-- api兼容问题,目前Vue3推荐v-slot,但是我的输入法不允许我用slot="ha",会自动帮我改写成v-slot:ha-->
<template v-slot:ha>
<span>南京大学!!!</span>
</template>
</Son>
</template>
<script>
import Son from "./Son.vue";
export default {
name: "Father",
components: {
Son,
},
setup() {
function getHello(value) {
console.debug(`我被调用了呢,我接受的参数是${value}`);
}
return {
getHello,
};
},
};
</script>
<template>
<!-- 注意:Vue3不强制要求template只有一个根节点 -->
<div>我是Vue3子组件</div>
<div>我的学校是:{{ school }}</div>
<button @click="test">我要调用父组件的事件</button>
<!-- 这边调用的是带名字的插槽用法,如果不带名字,直接<slot></slot> -->
<slot name="qwe"></slot>
<slot name="ha"></slot>
</template>
<script>
export default {
name: "Son",
// 注意:这里也是和Vue2不一样的地方,Vue2是父组件传递了参数,我子组件只要不用都可以不用声明。Vue3的话就比如Father.vue传递了hobby,我子组件不用hobby,还是会报警告。
props: ["school", "hobby"],
// 使用方式跟props一样,就是要声明父组件自定义事件,告诉子组件
emits: ["hello"],
beforeCreate() {
// 这里佐证setup比beforeCreate更先执行。
console.debug("--beforeCreate--");
},
setup(props, content) {
// content里面有三个参数:attrs,emit,slots,他们都分别相当于Vue2的$attrs,$emit,$slots
// props.school之所以能调用到值,是因为props声明了。所以输出:北京大学
// 注意content.attrs之所以没有值,是因为props声明了值,如果没声明的就会在里面进行打印。同时没声明的也会警告。
// 注意content.emit之所以没有值,是因为props声明了值,如果没声明的就会在里面进行打印。同时没声明的也会警告。
// content.slots接收了自定义插槽名字的内容。会在里面显示qwe和ha
console.debug("--setup--", props, content);
function test() {
// 没有声明emits: ["hello"]的话,可以用但是会报警告错误
// 调用父组件的自定义hello事件,并传参666
content.emit("hello", 666);
}
return {
// 这里必须返回出去,告诉大家这个可以被调用
test,
};
},
};
</script>
博博自己总结的,可能有些地方说的不对,欢迎指教交流。谢谢。学到目前感觉Vue3还是非常好的!