Data from father to son
Sons components can not communicate directly, such as a parent component data inside the msg variable, sub-assemblies and not directly referenced.
solution:
1) the parent sub-assembly component template tag write
data 2) binding to the parent component subassembly custom attribute tag
3) within the subassembly custom attributes props get
4) Using Custom Properties parent component can be obtained The data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父传子</title>
</head>
<body>
<div id="app">
<!--总结：
1）父组件模板中写子组件标签
2）父组件的数据绑定给子组件标签的自定义属性
3）在子组件内部通过props拿到自定义属性
4）使用自定义属性就可以获得父组件的数据
-->
<sub-tag :a="msg"></sub-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let subTag = {
// 子组件通过props实例成员获取自身自定义属性
props: ['a'],
template: `
<div>
<h1>{{ a }}</h1>
</div>
`
};
new Vue({
el: '#app',
data: {
msg: '父级数据'
},
components: {
subTag,
}
})
</script>
</html>