First, the components need to request to the server data, the server passes the data to the maximum outer parent components, thus resulting parent component required value passed to the following group, and hence, the introduction of communication between father and son
Subassembly or not reference data in the parent component's instance Vue; in development, often need to pass some data from an upper layer to a lower layer;
Sons way transmission of information between the components (pass each other): 1 props to transmit information to the sub-assembly 2 by sending an event message to the parent component;
Parent component - (pass props) ---- "subcomponent ------- ($ emit Events) ------" parent component
props basic syntax:
Parent component - (pass props) ---- "subcomponent
Use the options props need to declare the data received from the parent.
The value of props in two ways:
One way: when the name of the string array, the array of strings is passed.
Second way: object, the object may be provided when the transfer type, the default value may be provided and the like;
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> the Title </ title>
</ head>
<div ID = "App">
<! - only the use of v-bind as will be identified variables ->
<CPN:! cmovies = "Movies"> </ CPN> <- default values can be displayed as a default value and set the following no-parameters ->
<cpn: cmovies = "movies" : cmessage = "message"> </ cpn> <-! contrast, the parameters have been set, parameters that have been passed over are displayed ->
</ div>
<body>
<Template id = "cpn"> <- Note:! present mold assembly comprises a root only ->
<div>
<UL>
<-V for Li = "Item in cmovies"> Item {} {} </ Li>
</ UL>
{{cmessage}}
</div>
</template>
<script src="vue.js"></script>
<script>
/*父传子使用props*/
/ * Pass data desired parent components to the subassembly, and then let the display subassemblies * /
const = {CPN
Template: '# CPN',
Data () {
return {}
},
Methods: {},
// The props : [ "cmovies", "cMessage"]
the props: {
// definition at an object, can limit the type of his
// cmovies: the Array,
// cMessage: String,
// 2 and provide some default values must be passed value
cmovies: {
type: the array,
default () {/ * If the array, the default value must be a factory setting function, for return * /
return []
}
},
cMessage: {
type: String,
default: "assasas", / * set the default value * /
// required: to true / * This is the value that must be passed attribute * /
}
}
};
const = new new App Vue ({/ * as root parent element * /
EL : '# App',
data: {
Message: 'Hello',
Movies: [ "Sea King", "Piece", "Haier"] / * data parent element * /
},
components: {
CPN / * enhanced wording the enhanced properties written argument * /
}
})
</ Script>
</ body>
</ HTML>