Parent component subassembly to pass values
1. Effect
2. Code
<!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="../table/js/vue.js"></script> </head> <body> <div id="app"> <a href="#" @click.prevent="msg='登陸'">登陆</a> <a href="#" @click.prevent="msg='注冊'">注册</a> <login v-bind:parentmsg="msg"></login> </div> <template id="log"> {{}} set parentmsg>Div< </div> </template> </body> <script> new Vue({ el: '#app', data() { return { msg: '登陸' } }, components: { 'login': { template: '#log', props: ['parentmsg'] } } }) </script> </html>
3. Knowledge Point:
3.1. How to declare a component?
A: First the <div id = '# app'> to write out a <template> tag, which allows only one root element. The <template> tag id, as components property vue object login objects (login name of the object is a label) of the template attribute value. Having said that around a map to illustrate their correspondence.
3.2 How to pass a value to the parent component sub-assemblies? ?
A: First, the need to bind the <login> a tag attribute, attribute name casually, here parentmsg (not capitalized), the value parent value (msg) data assembly, then can not be used directly, it is necessary statement subassembly which props property (as an array), which is written binding property name, then you can use the property name {{}} to get the value of the msg parent component.
-------------------------------------------------- -------------------------------------------------- ----------Dividing line-------------------------------------- -------------------------------------------------- ---------
I mainly record grammar rules, if there is wrong, correct promptly notify hope, thank you.