vue3-setup的实行机遇（早于beforeCreate this为undefined）与传递参数(pro ...

1.前言

        setup函数是组合式API的一部分，用于组件创建之前实行逻辑，新的组合式API入口点，用于组件创建前实行逻辑，setup函数接收两个参数props与context。props包含了传递给子组件的所有属性。context包含attrs,slots,emit.
        setup实行的机遇
        在beforeCreate前实行一次，this是undefined.
        setup参数
        props: 值为对象，包含组件外部传递过来，并且组件内部声明接收了的属性。
        context:上下文对象
        attrs:值为对象，组件外部传递但是没有在props设置接收中声明的属性，this.$attrs.
        slots:收到的插槽内容，this.$slots.
        emit:分发自定义事件函数，this.$emit.
2.vue3中的props传参

父组件中利用子组件：参数传递给子组件。

1. <!-- ParentComponent.vue -->
2. <template>
3.   <div>
4.     <ChildComponent :name="parentName" :age="parentAge" />
5.   </div>
6. </template>
8. <script>
9. import { defineComponent, ref } from 'vue';
10. import ChildComponent from './ChildComponent.vue';
12. export default defineComponent({
13.   name: 'ParentComponent',
14.   components: {
15.     ChildComponent
16.   },
17.   setup() {
18.     const parentName = ref('messi');
19.     const parentAge = ref(15);
21.     return {
22.       parentName,
23.       parentAge
24.     };
25.   }
26. });
27. </script>

复制代码

子组件利用setup函数接收参数

1. <!-- ChildComponent.vue -->
2. <template>
3.   <div>
4.     <p>用户名字: {{ name }}</p>
5.     <p>用户年龄: {{ age }}</p>
6.   </div>
7. </template>
9. <script>
10. import { defineComponent } from 'vue';
12. export default defineComponent({
13.   name: 'ChildComponent',
14.   props: {
15.     name: {
16.       type: String,
17.       required: true
18.     },
19.     age: {
20.       type: Number,
21.       required: true
22.     }
23.   },
24.   setup(props) {
25.     // 在这里可以使用props.name 和 props.age
26.     console.log(props.name, props.age);
27.     return {
28.       // 返回的数据可以在模板中使用
29.     };
30.   }
31. });
32. </script>

复制代码

3.context对象emit方法触发自定义事件

父组件

1. <template>
2.   <div>
3.     <ChildComponent :msg="message" @child-click="handleChildClick" />
4.   </div>
5. </template>
7. <script>
8. import { ref } from 'vue';
9. import ChildComponent from './ChildComponent.vue';
11. export default {
12.   components: {
13.     ChildComponent
14.   },
15.   setup() {
16.     const message = ref('Hello from Parent');
17.     const handleChildClick = (childMessage) => {
18.       console.log(`Received from child: ${childMessage}`);
19.     };
21.     return {
22.       message,
23.       handleChildClick
24.     };
25.   }
26. };
27. </script>

复制代码

子组件

1. <template>
2.   <div>
3.     <p>{{ msg }}</p>
4.     <button @click="sendMessageToParent">Click me</button>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   props: {
11.     msg: String
12.   },
13.   setup(props, context) {
14.     const sendMessageToParent = () => {
15.       context.emit('child-click', 'Hello from Child');
16.     };
18.     return {
19.       sendMessageToParent
20.     };
21.   }
22. };
23. </script>

复制代码

   context 对象的 emit 方法被用来触发一个自定义事件 child-click，并将消息从子组件传递给父组件。父组件通过监听 child-click 事件来接收子组件传递的消息，并在控制台中打印出来。
        context 对象的其他属性，如 attrs 和 slots，也可以在 setup 函数中利用，分别用于访问组件的非prop属性和插槽内容。expose 方法可以用来显式地袒露组件实例上的属性或方法，使得父组件可以通过模板引用访问这些属性或方法。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。