Parent component subassembly to pass values
1. Vue Examples can be seen as a large component, then the inside thereof defined between the private component to this example appeared corresponding parent-child assembly.
2. A father and son in the case of default components, sub-assemblies is nothing wrong with access to the data in the parent component, so in order to use the data in the parent component sub-assembly, it needs to form the binding properties of the parent component data transferred to the subassembly.
3. By binding property data transmitted to the subassembly can no longer be used directly, it may be used later in the need to redefine the props. Example: props: [ 'variable name']. props is an array.
4. Data data are private subassembly, the subassembly can request through the data onto the data ajax use.
5. props: data [] are read-only, and can not be changed, if forced to change the page displayed will change the effect, but a warning.
<body>
<div ID = "App">
<COM1 the bind-V: fudata = "MSG"> </ COM1>
</ div>
</ body>
<Script>
var Vue new new VM = ({
EL: '#app ',
data: {
MSG:' this is the data in the parent element 1234 ---- '
},
components: {
COM1: {
Template:' <h1 of> this is the subassembly 5678 ------ ---- {{}} fudata --- </ h1 of> ',
The props: [' fudata ']
}
},
})
</ Script>
The method of delivery to the parent component subassembly
1. The sub-assembly method in order to obtain a parent component, we need time binding mechanism.
2. To use a parent component subassemblies pass over the method, we need to use a new method for this. $ Enit. ( 'Method name')
<!DOCTYPE html>
<html lang="en">
<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>
<script src="./lib/Vue.js"></script>
</head>
<body>
<div id="app">
<com1 @func="show"></com1>
</div>
<template id="ttpp">
<div>
<h1>子组件</h1>
<input type="button "value =" method of obtaining the parent element "@ click =" self "> by clicking the
EL: '#app',
<Script>
</ body>
</ Template>
</ div>
var Vue new new VM = ({
data: {},
methods: {
show() {
console.log("OK")
}
},
components: {
com1: {
template: '#ttpp',
methods: {
self() {
this.$emit('func');
}
}
},
},
})
</script>
</html>