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

最新推荐文章于 2022-07-03 11:10:28 发布

weixin_30772261

最新推荐文章于 2022-07-03 11:10:28 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/adaBlog/p/7117070.html

本文介绍了如何在Vue.js中使用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>