vue 组件之间的通信-父组件给子组件传递数据

下面是一个父组件给子组件传递数据的例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
    <child-cpn :message="message"></child-cpn>
</div>
<template id="childCpn">
    <div>显示的信息：{{message}}</div>
</template>

<script>
    let app=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        },
        components:{
            'child-cpn':{
                template:'#childCpn',
                props:['message']
            }
        }
    })
</script>

</body>
</html>

运行结果：

 

posted on 2020-06-16 09:50  ~码铃薯~  阅读(150)  评论(0)    收藏  举报

导航