vue组件之间的通信-父→子

最新推荐文章于 2024-08-03 22:09:22 发布

原创最新推荐文章于 2024-08-03 22:09:22 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Vue.js实现的简单父子组件通信示例。通过定义子组件并使用props来接收父组件传递的消息，展示了Vue.js中组件间数据流动的基本方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>

<div id="app">
<son :message="msg"></son>
</div>

<script>

Vue.component('son',{
props:['message'], /*props是单向绑定的（父→子），是vue为了防止子组件无意修改了父组件的数据和状态*/
template:`<div>{{message}}</div>`
});

//创建一个vue实例
const app = new Vue({
el:"#app",
data:{
msg:"我是父组件的数据"
}
});
</script>

</body>
</html>