setup函数

说明

setup是一个专门用于组合式 API 的特殊钩子函数，可以理解为一个生命周期函数，在beforeCreate之前。 vue3中代替beforeCerate、created； 在setup中直接声明变量，此变量并不会是响应式的；且setup中必须有返回值

1、无法访问组件中的数据和方法，无法获取this 2、在data和methods中可以访问setup中的数据或方法，反之在setup中无法获取data和methods中的数据或方法

setup参数

第一个参数属性props

typescript
<template>
  <h1 @click="cat">hello组件</h1>
</template>

<script>
export default {
  name:'HelloWordVue',
  props:['msg'],
  setup(props){
    function cat(){
      console.log('1',props)//1 Proxy {msg: '测试msg'}
    }
    return{
      cat,
    }
  }
}
</script>

<style>

</style>

第二个参数context

1. 通过context.emit()触发自定义事件

• 父组件

<template>
	<!-- 模板中不需要添加.value，程序会自动处理 -->
	<p @click="addnum">{{ a }}</p>
	<hello-word-vue msg="测试msg" @myfn="addnum" />
</template>

<script>
import { ref } from "vue";
import HelloWordVue from "./components/HelloWord.vue";
export default {
	name: "App",
	setup() {
		let a = ref(0);
		function addnum() {
			console.log("a", a);
			/* console.log
        a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0}
            dep: Set(1)
            [[Entries]]
            n: 0
            w: 0
            size: 1
            [[Prototype]]: Set
            __v_isRef: true
            __v_isShallow: false
            _rawValue: 1
            _value: 1
            value: 1
            [[Prototype]]: Object
      */
			//  需要通过.value形式获取到响应式数据，在此基础上操作
			a.value++;
		}
		return {
			a,
			addnum,
		};
	},
	components: {
		HelloWordVue,
	},
};
</script>

<style></style>

• 子组件

ts
    <template>

      <h1>hello组件</h1>
    </template>

    <script>
        export default {
        name: "HelloWordVue",
        props: ["msg"],
        setup(props, context) {
        console.log(context);
        function cat() {
        context.emit("myfn")
        }
        return {
        cat,
        };
        },
        };
    </script>

    <style></style>

1. 若子组件中没有props接受属性，则context.attrs会接受传入的属性

ts

<template>

  <h1>hello组件</h1>
</template>
<script>
export default {
    name: "HelloWordVue",
    // props: \["msg"],
    setup(props, context) {
        console.log(context);
        function cat() {
        context.emit("myfn")
    }
     return {
        cat,
     };
    },
};
</script>

<style></style>

1. 获取插槽内的内容

通过context.slots.before()获取插槽的内容

ts
    <template>
      <h1>hello组件</h1>
    </template>

    <script>
        export default {
        	name: "HelloWordVue",
        	props: ["msg"],
        	setup(props, context) {
        		console.log(context);
                console.log(context.slots.before())
        		function cat() {
        			context.emit("myfn")
        		}
        		return {
        			cat,
        		};
        	},
        };
    </script>

    <style></style>

setup函数的返回值

对象形式

对象内是自定义的数据

函数

说明

返回一个函数(渲染函数)，可以自定义渲染内容；优先级更高，会覆盖template的内容

语法

ts
    import {h} from 'vue';

    setup(){
        return ()=>h(渲染的html标签,渲染的内容)
    }

Eg

ts
    <template>
      <p>测试</p>
    </template>

    <script>
    import {h} from 'vue';

    export default {
      name: 'App',
      setup(){
        return ()=>h("h1","我是h1标签")
      }
    }
    </script>

    <style>

    </style>