vue学习(五)基础入门-基础知识(11)-组件通信

最新推荐文章于 2022-06-08 17:31:13 发布

wuyxinu

最新推荐文章于 2022-06-08 17:31:13 发布

阅读量283

点赞数

分类专栏： Vue Web前端

本文链接：https://blog.csdn.net/wuyxinu/article/details/102974331

版权

Web前端同时被 2 个专栏收录

47 篇文章 47 订阅

订阅专栏

Vue

40 篇文章 55 订阅

订阅专栏

父子组件的通信

props基本用法

props数据验证

props 的驼峰标识

<body>
    <div id ="app"> 
        <cpn :cinfo="info"></cpn>
    </div>

    <template id = "cpn">
        <h2>{cinfo}</h2>
    </template>

    <script>

     const cpn = {
         template:'#cpn',
         props:{
             cinfo:{
                 type:Object,
                 default(){
                     return {}
                 }
             }
         }
     }

     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            info:{
                name: 'why',
                age:18,
                height: 1.88
            }
        },
        methods: {},
        components:{
            cpn
        }
     });
    </script>
</body>

    <div id ="app"> 
//将cinfo改成驼峰标识
        <cpn :cInfo="info"></cpn>
    </div>

    <template id = "cpn">
        <h2>{{cInfo}}</h2>
    </template>

    <script>

     const cpn = {
         template:'#cpn',
         props:{
             cInfo:{
                 type:Object,
                 default(){
                     return {}
                 }
             }
         }
     }

目前vue版本为 3.11.0

不支持驼峰标识

子传父（自定义事件）

小案例

父子组件的访问方式

子访问父组件的 $parent 不推荐使用

wuyxinu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习(五)基础入门-基础知识(11)-组件通信

父子组件的通信props基本用法props数据验证props 的驼峰标识<body> <div id ="app"> <cpn :cinfo="info"></cpn> </div> <template id = "cpn"> ...
复制链接

扫一扫

专栏目录