VUE3.0——组件传值

迈不过友情╰ 2022-11-28 10:44 133阅读 0赞

子组件关键代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

子组件：

<template>
        <view class="header">
            <view class="header-top" @click="pop">
                <view class="header-back-arrow" v-if="showBack" ></view>
                <text class="header-title">{
       { title }}</text>
            </view>
        </view>
    </template>
    
    <script>
    import { ref } from 'vue';
    import Taro from '@tarojs/taro';
    
    export default {
        name: 'BaseNavBar',
        props: ['showBack', 'title'],
        setup(props, ctx) {
            const pop = () => {
                // Taro.navigateBack();
                ctx.emit('onBack');
                // ctx.emit('onBack', {type: 'pop'});
            };
            return {
                props,
                pop,
            };
        },
    };
    </script>
    
    <style>
    </style>

父组件：

<template>
        <view class="index">
            <BaseNavBar :showBack="false" title="首页" @onBack="onBack"></BaseNavBar>
        </view>
    </template>
    
    <script>
    import { ref, reactive } from 'vue';
    import Taro from '@tarojs/taro';
    import './index.scss';
    
    import BaseNavBar from '../../components/BaseNavBar.vue';
    
    export default {
        components: { BaseNavBar },
        setup() {
            const onBack = () => {
                console.log('onback');
            };
            return {
                onBack,
            };
        },
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: /images/20221124/3667fbe8c154449fbe191a719a3105f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关 30 Vue子组件调用父组件方法、传值和校验

\[组件\]Vue子组件调用父组件方法、传值和校验阐述编写计数器案例子组件调用父组件事件子组件向父组件传递参数对传递值的校验

古城微笑少年丶/ 2023年10月06日 20:38/ 0 赞/ 26 阅读

相关 Vue 父子组件传值

新建子组件新建一个模板对象com1，然后在vm中的components里注册一下，就可以使用com1标签了，标签内容就是子元素的内容。 //子组件 v

淡淡的烟草味﹌/ 2023年07月21日 08:40/ 0 赞/ 44 阅读

相关 vue 父子组件传值

父组件通过属性传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

蔚落/ 2023年07月10日 15:58/ 0 赞/ 42 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 340 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 343 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 337 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 404 阅读

相关【Vue】组件传值

本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_

Bertha 。/ 2021年11月05日 13:30/ 0 赞/ 406 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 557 阅读

相关 vue 兄弟组件传值

在vue开发中总会遇到组件传值问题，今天总结一下兄弟组件之间的传值方法。 1、子传父，父传子 2、vuex 3、eventBus 接下来介绍如何使用eventBus实现

た入场券/ 2021年09月04日 06:55/ 0 赞/ 440 阅读