一、总结component方式

通过app.component(name,见组件定 Component)可以注册全局组件，通过该方式注册的义方组件在任何子组件中可以直接调用，如下所示：

import {createApp,式竟 h} from vue

app.component(test-component, {

data() {

return {

count: 10

}

},

render() {

return h(h1, `测试${this.count}`);

}

});

// 使用：直接在所需要调用的位置直接调用该组件即可

注意：此处有一个位置没有搞懂，文档中表示可以直接调用template选项，写出但是总结我按照规范书写后内容并没有正常渲染，希望对该部分有研究的见组件定老铁可以给我指点迷津。(测试代码如下所示)

app.component(test-error,义方 {

template: `

Error!

`

});

// 使用（未正常渲染出来，由于自己对源码部分研究较少，式竟目前还未找到具体原因）

通过该种方式还可以将第三方组件注入到全局中，写出从而使该组件能够在别的总结位置直接使用，以导出Element Plus中的见组件定某些组件为例，注入到全局后可以在单文件组件中直接使用。义方

import {ElButton} from "element-plus";

const components = [

ElButton

];

export default {

install: app => {

components.forEach(component => {

app.component(component.name,式竟 component);

});

}

};

// 使用该插件

app.use(插件名);

// 使用该组件

test

二、Vue3.x的写出setup选项方式

setup函数是一个新的组件选项，是组件内部使用组合式API的入口点，使用该方式就像使用Vue2.x一样简单，免费源码下载仅仅是增加了一个选项，下面来看看如何用该方式定义一个组件：

这是组件二

import {ref, toRefs, onMounted} from vue;

export default {

props: [testProp1],

data() {

return {

a: 10

}

},

// 将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板

setup(props) {

// toRefs()函数的目的是延续响应式，防止丢失响应式（如果直接怼props解构会丢失响应式）

const {testProp1} = toRefs(props);

// ref()会接收内部值并返回一个响应式且可变的ref对象。

const count = ref(0);

console.log(setup);

onMounted(() => {

console.log(setup_mounted);

});

onMounted(() => {

console.log(script中setup的mount被执行1);

});

onMounted(() => {

console.log(script中setup的mount被执行2);

});

},

mounted() {

console.log(mounted);

}

}

三、Vue3.x的<script setup>方式

是不是感觉用setup方式写起来跟Vue2.x的区别不是很大，外观上看支持增加了一个setup选项，下面来一起看看这个更牛气的东西——,其是使用组合式API的b2b供应网编译时的语法糖，其使内容更加简洁，下面来一起看看该方式定义的组件。

这是组件一

{{testProp1}}

console.log(script setup 1执行了);

// 使用defineProps来声明props

defineProps({

testProp1: String

});

// 使用defineEmits来声明emits，然后调用的时候通过emit(事件名, 参数)形式触发

const emit = defineEmits([emit1, emit2]);

// https://juejin.cn/post/6976679225239535629

// ref:接收内部值并返回一个响应式且可变的ref对象。ref 对象仅有一个 .value property，指向该内部值；

// reactive: 为对象添加响应式状态，接收一个js对象作为参数，返回一个具有响应式状态的副本；

// toRef和toRefs主要目的是延续响应式，防止丢失响应式

import {ref, reactive, toRef, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, defineProps, defineEmits} from vue;

// ref让其具备响应式

const count = ref(0);

// 用reactive让该对象具备响应式

const state = reactive({

test: 0

});

const testRef = toRef(state, test);

const {test: test1} = toRefs(state);

const {test: test2} = state; // 会丢失响应性

onBeforeMount(() => {

console.log(beforeMount);

});

onMounted(() => {

console.log(mount);

});

onBeforeUpdate(() => {

console.log(beforeUpdate);

});

onUpdated(() => {

console.log(updated);

});

onBeforeUnmount(() => {

console.log(beforeUnmount);

});

onUnmounted(() => {

console.log(unmounted);

});

// 普通script在模块范围下只执行一次（可以不添加该部分）

console.log(script执行了！！！！！！);

export default {

// 当有script setup时，setup函数不会被执行

mounted() {

console.log(script 中 mount被执行！！！源码下载);

}

};

最新评论