父子组件之间传递数据--props

父子组件传递参数 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="myapp">
        <first-com com-msg="hello" :secon-msg="msg"></first-com>
    </div>
</body>
<script type="text/javascript">
Vue.component('first-com',{
    props:['comMsg','seconMsg'],
    template:'<div>{{comMsg}}<p>{{seconMsg}}</p></div>',
    data:function(){
        return {

        }
    }
})
var app = new Vue({
    el:"#myapp",
    data:{
        msg:'welcome1',

    }
})
</script>
</html>
1.组件中的props变量使用驼峰命名法,使用的时候,中间改为横杆,并且都是小写
2.使用props的值,可以定义固定的,也可以是绑定动态的值
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容