Vue.javascript源码分析(十三)基础篇组件props属性详解

雪花,是世界上最圣洁的花,当你静静的倾听天籁,尘世的浮躁与喧嚣,似乎都已离你远去,剩下的惟有纯净,那是心灵忘却一切的畅然,那是在没有尘埃的世界里,生命自由呼吸的平淡与安恬。

父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象。

例如:

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app"><child :title="message"></child></div>        
    <script>
        Vue.component('child',{
            template:'<h1>{{title}}</h1>',props:['title']       //这里props是一个字符串数组
        })
        var app = new Vue({
            el:'#app',data:{message:'Hello World'}
        })  
    </script>
</body>
</html>

以上就是Vue.javascript源码分析(十三)基础篇组件props属性详解。期待、等待、失败,人生就是那么纠结。更多关于Vue.javascript源码分析(十三)基础篇组件props属性详解请关注haodaima.com其它相关文章!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

vue如何实现列表固定列滚动

vue如何实现伸缩菜单功能

vue项目中canvas如何实现截图功能