A parent components pass data to the sub-assembly
1, assembly parent-child relationship is first formed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<template id="cpn">
<div>
<h2>{{cmovies}}</h2>
<p>{{cmessage}}</p>
</div>
</template>
<script>
const cpn = {
template: `#cpn`,
data() {
return {}
},
methods: {}
}
let vm = new new Vue ({
EL: '#app' ,
Data: () => ({
Message: 'data parent element' ,
Movies: [ 'Wolf 1', 'stray earth', 'climbers' ]
}),
Components: {
CPN
}
})
</ Script>
</ body>
</ HTML>
2, in the definition of a sub-assembly props, define two variables (messages) (moviess)
props: ['messages', 'moviess']
3, when using the sub-assembly, bind two variables (messages) (moviess) with V-bind, and the data (message) (movies) parent components pass these two variables.
< CPN : messages = "Message" : moviess = "Movies" > </ CPN >
<-! Is not supported between uppercase hump nomenclature separated by - ->
The complete code **** *****
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<cpn :messages="message" :moviess="movies"></cpn>
<! - does not support the use of capital letters hump between nomenclature - separated ->
</ div >
<! - from father to son ->
<! -
1, parent-child relations
2, defined in the subassembly a the props, define two variables (messages) (moviess)
. 3, when using the sub-assembly, bind two variables V-bind, and the data (message) (movies) parent components pass these two variables.
->
< Template ID = "CPN" >
< div >
< H2 > {{messages}} </ H2 >
< UL >
< Li V-for = "Item in moviess" >
{{}} Item
<
UL >
</ div >
</ Template >
< Script >
const CPN = {
Template: # `cpn`,
// The props: [ 'messages', 'moviess'],
The props: {
// . 1, type restrictions
// messages : the Array,
// moviess: String,
// provide some default values
messages: {
type: String,
default : ' AAAA ' ,
required: to true
},
//When using components, there is no variable bindings defined props, displays a default value defined
moviess: {
// type is an array or an object, must be a function of a default value.
type: the Array,
// default: []
default () {
return []
}
}
},
Data () {
return {}
},
Methods: {}
}
the let VM = new new Vue ({
EL: ' #app ' ,
Data : () => ({
Message: ' data parent element ' ,
Movies: [ ' Wolf 1 ' , ' stray earth ' , ' climber ' ],
}),
Components: {
CPN
}
})
</ Script >
</ body >
</ HTML >
** props supplemented wording
The props: {
// . 1, type restrictions
// messages: the Array,
// moviess: String,
// provide some default values
messages: {
type: String,
default : 'AAAA' ,
required: to true
},
// when using assembly when there is no defined props bind variables, displays the default value defined
moviess: {
// type is an array or an object, it must be a function of a default value.
type: the Array,
// default: []
default () {
return []
}
}
}
Second, data transmitted to the parent sub-assembly component
1, the components constituting the parent-child relationship
2, the subassembly in a custom action event: transmitting an event to the parent component
<button v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
Methods: {
btnClick: function (Item) {
// transmit events: custom event
the this . $ EMIT ( 'itemClick' , Item)
}
}
3, using the event @ itemclick sub-components defined in the template parent assembly = "cpnclick" and create a new event in the parent component cpnclick
<cpn @itemclick="cpnclick"></cpn>
methods: {
cpnclick: function (item) {
console.log('cpnclick', item)
}
}
*** *** complete code
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0">
< HTTP-equiv = Meta "X--the UA-Compatible" Content = "IE = Edge">
<title> the Document </ title>
<Script the src = "../ JS / vue.js"> </ Script>
</ head >
<! - parent component templates ->
<div the above mentioned id = "App">
<@ itemClick cpn = "cpnclick"> </ cpn>
</ div>
<! -
1 , composed of a parent-child relationship between the component
2, in sub components define an event, it is to launch an event to the parent component. the this . $ EMIT ( 'itemClick'
<body>
<-! subassemblies template ->
<Template the above mentioned id = "cpn">
<div>
<the Button V- for = "Item in the Categories" @ the Click = "btnClick (Item)"> {{item.name }} </ Button>
</ div>
</ Template>
<Script> // subassembly
const CPN = {
Template: # `cpn`,
Data () { return {
the Categories: [
{ID: 'AA', name: 'Hot Offers' },
{the above mentioned id: 'bb', name: 'Mobile phones' },
ID {: 'CC', name: "smart home" },
ID {: 'dd', name: 'hairdressing' }
]
}
},
Methods: {
btnClick: function (Item) {
// transmit events: custom event
the this . $ EMIT ( 'itemClick' , Item)
}
}
}
// parent element
the let VM = new new Vue ({
EL: '#app' ,
Data: () => ({}),
components: {
CPN
},
Methods: {
cpnclick: function (item) {
console.log('cpnclick', item)
}
}
})
</script>
</body>
</html>
