This is the 24th day of my participation in the August Text Challenge.More challenges in August
Preface:
Hello everyone, meet again, I’m Loncon, a little white guy on the road to explore, let’s start today’s topic: in-depth understanding of the difficult concept of VUE — child to father.
In VUE, there is the concept of “father-child transmission”, which includes both father to child and child to father. In my last article, FATHER to child was mentioned. This time, a case will take you to understand the difficult concept of “child to father”.
First of all, we analyze the main functions of this case according to the renderings:
As we can see from this picture, the left side is the child component, and the right side is the parent component. The input content of the child component is displayed synchronously in the parent component, and the parent component uses the content of the child component. This is the realization of the concept of child to parent.
The principle of child to parent is event to value, according to this principle now start our code combing:
1. Define the child component and its contents. In the child component, define the component label name.
2. Register the keyboard return event for the last form, which triggers the binding event. That is, after the button is pressed, a series of operations from child to parent are started.
3. V-model, which is used to receive form values for two-way data binding.
4. This.$emit(‘ event name ‘, parameter…) Method, which is the key to passing the child to the parent. The child is bound to the component tag by the event name defined here.
5. According to the attribute value of the event name, the parent component defines the function with the attribute value of the event name in its own instance, and carries out data transfer in the function. (Critical)
< div id = "app" > < modal @ fclick = "FFN" > < / modal > / / the third step: <div class="right"> <h2> Parent </h2> <p>1. From child component -- {{title}}</p> <p>2. Coming from the child components - {{one}} < / p > < / div > < / div > Vue.com ponent (' modal, {template: ` < div class = "modal" > < div > < h2 > subcomponents < / h2 > 1. -- -- -- < input type = "text" v - model = 'list. The first' > < br / > 2. -- -- -- < input type = "text" V -model='list.second' @keyup.enter='sure'><br/> // { first: '', second: '', }, }; }, methods: { sure() { if ( ! this.list.first | ! this.list.second ) return; this.$emit('fclick', this.list); $emit = this.$emit = this.$emit = this.$emit = this.$emit; const vm = new Vue({ el: '#app', data: { title: '', one: '', }, methods: {FFN (n) {// Last step: the parent defines the function FFN internally based on the FFN in the child component tag, which is used to receive data console.log(n); this.title = n.first; this.one = n.second; ,}}});Copy the codeComplete code (plus style) presented, small partners have questions also please leave a message to communicate oh!!
<! 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> <style>.modal { width: 300px; padding: 50px; background-color: rgb(93, 165, 194); border-radius: 30px; margin: 10px; float: left; } input { height: 20px; margin: 12px 0 12px 12px; } body { padding: 0 200px; background-color: #ccc; } .right { float: right; width: 300px; padding: 80px; background-color: #fff; border: 4px solid #ea797f; border-radius: 30px; margin: 10px; } < / style > < / head > < body > < div id = "app" > < modal @ fclick = "FFN" > < / modal > < div class = "right" > < h2 > parent component < / h2 > < p > 1. From child component -- {{title}}</p> <p>2. Coming from the child components - {{one}} < / p > < / div > < / div > < script SRC = ". / vue. Js "> < / script > < script > Vue.com ponent (' modal, {template: ` < div class = "modal" > < div > < h2 > subcomponents < / h2 > 1. -- -- -- < input type = "text" v - model = 'list. The first' > < br / > 2. -- -- -- < input type = "text" v-model='list.second' @keyup.enter='sure'><br/> </div> </div> `, data() { return { list: { first: '', second: '', }, }; }, methods: { sure() { if ( ! this.list.first | ! this.list.second ) return; this.$emit('fclick', this.list); ,}}}); const vm = new Vue({ el: '#app', data: { title: '', one: '', }, methods: { ffn(n) { console.log(n); this.title = n.first; this.one = n.second; ,}}}); </script> </body> </html>Copy the code