1. Define the msg attribute in the parent component
data:{
msg:'123 -I am the data in the parent component'
},2. Reference sub components
When a parent component references a child component, the data that needs to be passed to the child component can be passed to the internal of the child component in the form of property binding through the form of property binding for use by the child component.
Bind the msg attribute passed from the parent component to the parentmsg attribute of the child component.
<com1 :parentmsg="msg"></com1>
3. In the sub component definition part, the parentmsg attribute passed from the parent component needs to be defined in the props array (representing that the attribute is passed from the parent component), so that the data can be used
props:['parentmsg'],
4. Use in subcomponents
template:"<h1>This is a subcomponent--{{parentmsg}}</h1>",5. Differences between data and props in subcomponents
The data data in the child component is not passed through the parent component, but is private, readable and writable.
All the data in props in the child component is passed to the child component through the parent component and is read-only.
Full code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='app'>
<!-- When a parent component references a child component, the data that needs to be passed to the child component can be bound by attributes,
//In the form of attribute binding, it is passed to the internal of the subcomponent for use by the subcomponent -- >
<com1 :parentmsg="msg"></com1>
</div>
</body>
<script src="../lib/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'123-I am the data in the parent component'
},
components:{
//data and methods of the parent component cannot be accessed in the child component
com1:{
//The data data in the child component is not passed through the parent component and is private to the child component
//Data on data is readable and writable
data(){
return {
title:'123',
content:'qqq'
}
},
template:"<h1>This is a subcomponent--{{parentmsg}}</h1>",
//Note that all the data in props in the component is passed to the child component through the parent component
//read-only
props:['parentmsg'],//The parentmsg property passed from the parent component,
//First define it in props array, so that you can use this data
methods:{
}
}
}
})
</script>
</html>
