vue2的optionApi
1.创建项目
vue create vue2_optionapi
image.png
目录:
image.png
App.vue
<template>
<div>
<div>app: count: {{ count }} - count * 2: {{ doubleCount }}</div>
<home :title="title" @change="change" />
<button @click="btnClick">app按钮</button>
</div>
</template>
<script>
import Base from "@/extends/base.vue";
import defaultMixin from "@/mixins/defaultMixin";
import Home from "@/views/Home.vue";
export default {
name: "App",
mixins: [defaultMixin],
extends: Base, //Base为组件名
provide() {
return {
message: () => this.info,
//如果想实现父组件中的info发生改变,使用message的后代组件都响应式更新,message必须是一个由返回值的函数
};
},
components: {
Home,
},
data() {
return {
info: "今天天气不错",
count: 100,
};
},
computed: {
doubleCount() {
return this.count * 2;
},
},
methods: {
change(info) {
console.log("监听到了home的change事件", info);
this.info = info;
},
},
watch: {
info(newVal, oldVal) {
console.log("监听到了info值的改变", newVal, oldVal);
},
},
filters: {
priceFormat(val) {
return "¥" + val;
},
},
// 下面是生命周期
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
activated() {},
deactivated() {},
beforeDestory() {},
destoryd() {},
};
</script>
<style></style>
src/views/Home.vue
<template>
<div>
<h1>home标题:{{ title }}</h1>
<div>home信息:{{ message }}</div>
<button @click="btnClick">home按钮</button>
</div>
</template>
<script>
export default {
inject: ["message"],
props: {
title: {
type: String,
required: true,
},
},
methods: {
btnClick() {
this.$emit("change", "雷电预警");
},
},
watch: {
message(newVal, oldVal) {
console.log("home中监听到了message值的改变", newVal, oldVal);
},
},
};
</script>
<style lang="scss" scoped></style>
src/extends/base.vue
<template>
<div>不要再extends模板中写内容,写了也不会渲染</div>
</template>
<script>
export default {
methods: {
btnClick() {
console.log("extends中 btnClick事件被触发");
},
},
};
</script>
<style lang="scss" scoped></style>
src/mixins/defaultMixin.js
export default {
data() {
return {
title: "hello world",
};
},
created() {
console.log("defaultMixin created");
},
methods: {
increase() {
console.log("defaultMixin increase事件被触发");
},
},
};
image.png
上面的转换为vue3CompositionApi写法
目录如下:
image.png
App.vue
<template>
<div>
<div>app: count: {{ count }} - count * 2: {{ doubleCount }}</div>
<home :title="title" @change="change" />
<button @click="btnClick">app按钮</button>
</div>
</template>
<script>
import {
ref,
computed,
watch,
onMounted,
onBeforeMount,
onUpdated,
onBeforeUpdate,
onUnmounted,
onBeforeUnmount,
onActivated,
onDeactivated,
} from "vue";
import { useMixins } from "./hooks/useMixins";
import { useExtends } from "./hooks/useExtends";
import Home from "./Home.vue";
export default {
name: "App",
provide() {
return {
message: this.info,
};
},
components: {
Home,
},
setup() {
//mixins和extends,vue3虽然也支持,但是对于使用vue3开发其实没有什么用处了,可以用hooks替代
const { title } = useMixins();
const { btnClick } = useExtends();
//响应式变量
const info = ref("今天天气不错"); //ref函数返回一个ref对象,参数存放在ref对象的value的值里
const count = ref(100);
// 计算属性
const doubleCount = computed(() => {
return count.value * 2;
});
//methods
const change = (val) => {
console.log("监听到了home的change事件", val);
info.value = val;
};
//vue3废弃掉了priceFormat
const priceFormat = (val) => {
return "¥" + val;
};
//watch
watch(info, (newVal, oldVal) => {
console.log("监听到了info值的改变", newVal, oldVal);
});
// 下面是生命周期
onBeforeMount(() => {
console.log("组件挂载前");
});
onMounted(() => {
console.log("组件挂载成功");
});
onUpdated(() => {});
onBeforeUpdate(() => {});
onUnmounted(() => {});
onBeforeUnmount(() => {});
onActivated(() => {});
onDeactivated(() => {});
return {
info: "今天天气不错",
count: 100,
doubleCount,
change,
priceFormat,
title,
btnClick,
};
},
};
</script>
<style></style>
Home.vue
<template>
<div>
<h1>home标题:{{ title }}</h1>
<div>home信息:{{ message }}</div>
<button @click="btnClick">home按钮</button>
</div>
</template>
<script>
import { watch } from "vue";
export default {
inject: ["message"],
props: {
title: {
type: String,
required: true,
},
},
setup(props, { emit }) {
const btnClick = () => {
emit("change", "雷电预警");
};
watch(message, (newVal, oldVal) => {
console.log("home中监听到了message值的改变", newVal, oldVal);
});
return {
btnClick,
};
},
};
</script>
<style lang="scss" scoped></style>
hooks/useExtends.js
export function useExtends() {
const btnClick = () => {
console.log('extends中 btnClick事件被触发')
}
return {
btnClick
}
}
hooks/useMixins.js
import {
ref,
onMounted
} from "vue"
export function useMixins() {
console.log('defaultMixin created')
const title = ref('hello world')
const increase = () => {
console.log('defaultMixin increase事件被触发')
}
onMounted(() => {
console.log("defaultMixin中onMounted生命周期被触发")
})
return {
title,
increase
}
}
此文档主要内容来源于王红元老师的vue3+ts视频教程
网友评论