<!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>Document</title>
</head>
<body>
<!-- 渲染各个组件的容器 -->
<div id='app'>
<child-a :msgchilda="str"></child-a>
---------------------------------------------
<child-a msgchilda="我是测试的数据1111======"></child-a>
</div>
<script src='./vue.js'></script>
<script>
// 需求: 想把根(父)组件的数据data中的某个数据msg传递给子组件child-a去使用({{数据}})
Vue.component("child-a", {
template: `<div>我是子组件--{{count}}--是自己的data中的数据count |======|
-- {{msgchilda}}-- 是来源于外部组件的数据</div>`,
data() {
return { count: 100 }
},
props: ["msgchilda"]
})
// 2个组件-> newVue的视图当成整个网页的根组件
// 此时 根组件就是newVue的视图div#app 子组件就是child-a
new Vue({
el: '#app',
data: {
str: "我是父组件data的数据str"
},
methods: {
}
});
</script>
</body>
</html>
