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这个传递数据的方向,是父传给 子。不能倒过来!不能子传父!这个大家要注意。

相关推荐
佳腾_3 分钟前
【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断
前端·中间件·性能优化·tomcat·web应用服务器
brzhang7 分钟前
告别 CURD,走向架构:一份帮你打通任督二脉的知识地图
前端·后端·架构
Moment14 分钟前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js
兜小糖的小秃毛15 分钟前
el-Input输入数字自动转千分位进行展示
前端·javascript·vue.js
兜小糖的小秃毛16 分钟前
文号验证-同时对两个输入框验证
开发语言·前端·javascript
brzhang16 分钟前
代码越写越乱?掌握这 5 种架构模式,小白也能搭出清晰系统!
前端·后端·架构
J总裁的小芒果23 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星25 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang32 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears32 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code