Vue3---父子组件传值(子组件使用 emit 传值到父组件)

た入场券 2022-11-05 12:58 218阅读 0赞

Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context（组件上下文）中的emit。

[官网API![icon-default.png?t=L892][icon-default.png_t_L892]/images/20221023/d5f3c339e8b7433caec4928616559ce2.png][API_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_emits-option.html]

###   例1：Tab菜单子组件 ###

*  **创建子组件Tabs.vue**

<template>
        <div class="Tabs">
            <div v-for="(menu, index) in listMenu" :key="index" 
                @click="menuClick(menu.name)"
                :class="{ 'mactive' : menu.isActive === true ? true : false }">
                {
       { menu.name }}
            </div>
        </div>
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    export default defineComponent({
        name: 'Tabs',
        props: {
            listMenu: { // 菜单数据
                type: Array,
                required: true,
                default(){
                    return []
                }
            }
        },
        setup(props, context){
            const listMenu = props.listMenu
            function menuClick (menuName) {
                // 通过自定义事件回传值
                context.emit('menuClick', { menuName })
            }
            return {
                listMenu,
                menuClick
            }
        }
    })
    </script>
    <style lang='scss'>
        .Tabs{
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 50px;
            background-color: #0087AC;
            color: black;
        }
        .mactive{
            color: white;
            font-weight: bold;
        }
    </style>

*  **父组件**

<template>
      
      <Tabs :listMenu="listMenu" @menuClick="menuClick" />
    </template>
    <script>
    import { defineComponent, ref } from "vue";
    import Tabs from '../components/Tabs'
    
    export default defineComponent({
      name: "Index",
      components: {
        Tabs
      },
      setup() {
        const listMenu = ref([
          {
            name : '总部',
            isActive : true
          },
          {
            name : '地球',
            isActive : false
          },
          {
            name : '火星',
            isActive : false
          }     
        ])
        function menuClick (param) {
          listMenu.value.forEach(item => {
            item.isActive = item.name === param.menuName ? true : false
          })
        }
        return {
          listMenu,
          menuClick
        }
      }
    });
    </script>

###      ###

![20210306184154694.png][]

###   例2：搜索子组件 ###

*  **创建子组件Search.vue**

<template>
        <div class="searchInp">
            <div class="inp">
                <input type="text" :placeholder="placeholder" v-model="search.content" />
                <span @click="handlerSearch">搜索</span>
            </div>
        </div>
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    
    export default defineComponent({
        name: 'Search',
        props: {
            tip: {
                type: String,
                reuquired: false,
                default: ''
            }
        },
        setup(props, { emit }) {
            const placeholder = props.tip
            const search = ref({
                content: ''
            })
            function handlerSearch () {
                emit('searchClick', search.value)
            }
            return {
                placeholder,
                search,
                handlerSearch
            }
        }
    })
    </script>
    <style lang="scss">
        .searchInp{
            height: 40px;
            line-height: 40px;
            width: 100%;
            background-color: #0087AC;
            border-radius: 20px;
            color: white;
        }
        .inp input{
            width: 80%;
            height: 30px;
            line-height: 30px;
            background-color: transparent;
            border: none;
            outline: none;
            color: white;
        }
        .inp input::-webkit-input-placeholder{
            color: white;
        }
        .inp span{
            width: 20%;
        }
    </style>

*  **父组件**

<template>
      
      <Search tip="请输入搜索内容" @searchClick="searchClick" />
      <h3>子组件传值内容：{
       { searchCon }}</h3>
    </template>
    <script>
    import { defineComponent, ref } from "vue";
    import Search from '../components/Search'
    
    export default defineComponent({
      name: "Index",
      components: {
        Search
      },
      setup() {
        const searchCon = ref('')
        function searchClick (searCon) {
          searchCon.value = searCon.content
        }
       
        return {
          searchClick,
          searchCon
        }
      }
    });
    </script>

![20210306190937898.png][]

例3：也可以在模板中直接使用 $emit 来传自定义事件到父组件

*   子**组件**

<template>
      <div>
        <h1 @click="changeName();$emit('aboutEvent', name)">This is an about page</h1>
      </div>
    </template>
    <script>
    import { defineComponent, ref } from 'vue'
    export default defineComponent({
      name: 'AboutComponent',
      setup(){
        const name = ref('About')
        function changeName () {
          name.value = 'AboutComponent'
        }
        return {
          changeName,
          name
        }
      }
    })
    </script>

*   父组件

<template>
      <div class="about">
        <AboutComponent @aboutEvent="handleEvent" />
      </div>
    </template>
    <script>
    import { defineComponent, defineAsyncComponent } from 'vue'
    export default defineComponent({
      name: 'About',
      components: {
        AboutComponent: defineAsyncComponent(() => import('@/components/AboutComponent'))
      },
      setup () {
        function handleEvent (param) {
          console.log(param)
        }
        return {
          handleEvent
        }
      }
    })
    </script>

[icon-default.png_t_L892]: https://csdnimg.cn/release/blog_editor_html/release1.9.1/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=L892
[API_icon-default.png_t_L892_icon-default.png_t_L892_https_v3.cn.vuejs.org_guide_migration_emits-option.html]: /images/20221023/d5f3c339e8b7433caec4928616559ce2.png
[20210306184154694.png]: /images/20221023/3ebbd6e64a7642d6b20c0a1fd138a71c.png
[20210306190937898.png]: /images/20221023/372d7b72c5264669bacbad8f6945684a.png