使用-Prop-传递数据（父组件通过 props 向下传递数据给子组件） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用-Prop-传递数据</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!--传入值到子模板的props-->
    <child my-message="hello!"></child>

    <!--绑定父组件的数据到子模板的props-->
    <child2 v-bind:cm="parentMsg"></child2>
</div>
<script>
    Vue.component('child', {
        props    : ['myMessage'],
        template : '<span>{{ myMessage }}</span>'
    })


    Vue.component('child2', {
        props    : ['cm'],
        template : '<span>{{ cm }}</span>'
    })

    new Vue({
        el         : '#app',
        data : {
            parentMsg : 'parentMsg'
        }        
    })

</script>
</body>
</html>

 

posted @ 2017-07-04 16:27  蒲公英的种子90  阅读(422)  评论(0)  编辑  收藏  举报