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

195 阅读 0 评论 129 点赞

我是靠谱客的博主瘦瘦吐司，这篇文章主要介绍vue学习(五)基础入门-基础知识(11)-组件通信，现在分享给大家，希望可以做个参考。

父子组件的通信

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 {}
                 }
             }
         }
     }