vue3的setup注意点

最新推荐文章于 2024-05-08 21:19:52 发布

前端菜鸟--LKX

最新推荐文章于 2024-05-08 21:19:52 发布

阅读量191

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/lkx_20201106/article/details/125493354

版权

vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客介绍了Vue3中子组件与父组件的通信方式，通过`setup`函数展示了如何使用`reactive`响应式数据和`emit`触发事件。在父组件中，详细说明了如何监听并处理子组件传递的事件，以及使用插槽进行内容分发。

摘要由CSDN通过智能技术生成

子组件

<template>
  <div>
    <h1>setup注意点</h1>
    <hr>
    <div>{{person.name}}</div>
    <div>{{person.age}}</div>
    <div>{{msg}}</div>
    <div>{{school}}</div>
    <button @click="sonHandleHello">触发hello事件</button>
  </div>
</template>

<script>
import { reactive } from '@vue/reactivity';
export default {
  name: 'Vue3Study05Setup',
  // props:['msg','school'],
  beforeCreate(){
    console.log('---beforeCreate---');
  },
  setup(props,context){
    console.log('---setup---');//setup在beforeCreate之前执行, 在setup里面使用this无效(undefined)
    console.log(props);//外部传入的值
    console.log(context);
    console.log(context.attrs);//给props捡漏
    console.log(context.emit);//执行外部事件
    console.log(context.slots);//插槽
    
    let person = reactive({
      name:'张三',
      age:18,
    })
    function sonHandleHello(){
      context.emit('hello',999)
    }
    return {
      person,
      sonHandleHello
    }
  },
};
</script>

<style lang="scss" scoped>

</style>

父组件

<template>
  <setupDetail @hello='handleHello' :msg='msg' :school='school'>
    <template v-slot:lin>
      <span>尚硅谷</span>
    </template>
    <template v-slot:kang>
      <span>尚硅谷</span>
    </template>
  </setupDetail>
</template>

<script>
import setupDetail from "./components/05-setup-detail.vue"
export default {
  name: 'App',
  components: {
    setupDetail
  },
  setup(){
    function handleHello(value){
      alert('触发了hello事件,收到的参数是'+value)
    }
    return {
      handleHello
    }
  },
  data() {
    return {
      msg: 'setup注意点',
      school:'尚硅谷'
    };
  },
}
</script>

<style>
</style>