Vue 传递

今天刷了一遍Vue的API,做个小笔记
父子传递数据时,父组件里标记要传的数据,子组件里用props获取,子组件用$emit(‘func’,args)发布事件,父组件用@func接收。
方法一
parent.vue:
enter image description here
child.vue
enter image description here
enter image description here

方法二
或者子组件直接用 $props 和 $attrs 进行获取属性

方法三
使用$parent/$children

方法四
父组件使用,然后this.$refs.name 则可以获取子组件的信息(props等)

例:
parent.vue

<template>
    <div>
        <h1>我是父组件</h1>
        <child ref="child"></child>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            parent(){
                this.$.refs.child.childFn()
            }
        }
    }
</script>

child.vue

<template>
    <div>
       <h2>我是子组件</h2>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            childFn(){
                alert('父组件调用了我')
            }
        }
    }
</script>
posted @   geekfeier  阅读(163)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示