<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<child :childmsg = "parent_Msg" ></child>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
Vue.component("child",{
props:["childmsg"],
template:`
<div>
<p>{{childmsg}}</p>
</div>
`
})
new Vue({
el: "#app",
data: {
parent_Msg:"父组件的数据"
}
})
</script>
1.先定义父组件,父组件传递 parent_Msg这个数值给子组件
2定义子组件,子组件通过 props方法获取父组件传递过来的值。
运行后: