vue assembly on traditional values

First, to understand the nested components (global nested, nested partially) by value and therefore there are three ways, namely a parent - child, the child - the parent

Let's talk about parent - child pass values between:

Throws problem: To get the data in the parent sub-assembly components among;

Let's backwards: a common component to get the data we defined Picture Talk

Subassembly itself acquired data (name) is directly take over with {{name}};

So: The question now is not how to get from the data itself,

1, in a subassembly custom tag name attribute value of parent components pass name1 value, i.e.: name1 = 'title',

2, inside the sub-assembly has a vue example props then taken directly attribute name {{name1}} can get the value of the parent element

props: on the map

2, the sub - pass between a parent value: the data to the sub-assembly in the parent component

First, as seen from the dom structure vue two components of the internal components, that only dom inside a relationship of father and son, so the use of the principle event mechanism,

 
  // events EventEmitter - emit ( 'event', data) ON ( 'event', () =>) 
 
  // Vue.prototype.$emit=EventEmitter.emit

Define a click event in a sub-component tag to send data to the parent component, while the child within parent component label also accepts a custom event data.

<!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">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <h2>传值</h2>
    <v-parent></v-parent>
</div>
<template id="parent">
    <div>
        <h3>父组件</h3>
        <p>接受子组件---{{str}}</p>
        <v-child @toparent='getval'></v-child>
    </div>
</template>

<template id="child">
    <div> 
        <hr>
        <H2> sub </ h2> Components 
        <P> {{title}} </ P> 
        <Button @ the Click = 'GET ()'> transmission parent component data </ Button> 
    </ div> 
</ Template > 
<! - using the principles event mechanism, dom inside a relationship of father and son, and should therefore be operating inside the dom, to achieve the purpose of traditional values
 1, // events EventEmitter - EMIT ( 'event', data) on ( 'event ', () =>) 
// Vue.prototype $ = EventEmitter.emit EMIT.
 
-> 
<Script> var App = new new   Vue ({ 
        EL: ' #app ' , 
        Components: { ' parent-V ' : { 
            Template : '#parent' ,
            data(){return{
                    str:
    
          
                '' 
                } 
            }, 
            Methods: { 
                GetVal (MSG) { // pass over arguments 
                    the console.log (MSG);
                     the this .str = MSG; 
                } 
            }, 
            Components: {
                 'V-Child' : { 
                    Template: '# child ' , 
                    Data () { 
                        return { 
                            title: ' I was sent subassembly ' 
                        } 
                    }, 
                    Methods: { 
                        GET () { 
                            the this . $ EMIT ( 'toparent',this.title)
                        }
                    }
                }
            }
           } 
        }
    })
</script>
</body>
</html>

vue assembly on traditional values

Guess you like