vue前端开发自学,父子组件之间的数据传递demo

vue前端开发自学,父子组件之间的数据传递demo!下面为大家展示的是,vue开发中常见的,父子级别关系的,数据 传递案例。先给大家看一下,源码,然后讲解一下里面的注意事项。

复制代码
<template>
    <h3>Parent</h3>
    <Child  :title="message"/>
</template>
<script>
import Child from "./Child.vue"
    export default{
        data(){
            return {
                message:"Parents内容!"
            }
        },
        components:{
            Child
        }
    }
</script>

如图所示,以上代码是Parent.vue的内容。


复制代码
<template>
    <h3>Child</h3>
    <p>{{ title }}</p>
</template>
<script>
    export default{
        data(){
            return {
                
            }
        },
        props:["title"]
    }
</script>

如图,以上代码是Child.vue的源码内容。


如图,是执行后,在浏览器内看见的执行效果。子组件确实拿到了父组件传递过来的数据。而且是使用了动态的方式。当然了,你可以使用静态绑定的数据,一样也可以传递过来的。


复制代码
<template>
    <h3>Parent</h3>
    <Child  title="Parents内容!222"/>
</template>
<script>
import Child from "./Child.vue"
    export default{
        data(){
            return {
               
            }
        },
        components:{
            Child
        }
    }
</script>

以上是使用了静态数据的方式,一样可以在子组件拿到数据的,下面是执行效果!

如图,拿到了父组件绑定的静态数据内容。


注意事项:vue这个传递数据的方向,是父传给 子。不能倒过来!不能子传父!这个大家要注意。

相关推荐
范文杰2 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy3 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom4 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom4 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom4 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom4 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom4 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI5 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端