vue - Detailed explanation of parent-child components and ref instances

<div >
  <!-- Parent component，Can refer to subcomponents， pass Attribute binding（v-bind:） Form of, Bundle Need to be passed to Data of subcomponents，以Attribute bindingForm of，Pass to the subcomponent inside，For use by subcomponents -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// Create a Vue instance and get a ViewModel  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 Ah - Data in the parent component'
   },
   methods: {},
   components: {
    // Conclusion: After demonstration, it was found that in the child component, the data on data in the parent component and the methods in methods cannot be accessed by default in the child component.    com1: {
     data() { // Note: The data data in the child component is not passed through the parent component, but is private by the child component itself. For example: the data requested by the child component can be placed on the data through Ajax;      // The data on data is readable and writable;      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h1 @click="change">This is a subcomponent --- {{ parentmsg }}</h1>',
     // Note: All data in props in the component are passed to the child component through the parent component     // The data in props are read-only and cannot be reassigned     props: ['parentmsg'], // Define the parentmsg property passed by the parent component first in the props array, so that this data can be used, read-only, and will be alerted if written     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
        = 'Changed'
      }
     }
    }
   }
  });

<div >
  <!-- Parent component to child component transfer method，Used Event binding mechanism； v-on, When we customize one After the event attribute，So，Subcomponents can，Through some ways，Come to call transfer进去的 this method了 -->
  <com2 @func="show"></com2>
 </div>
 <template >
  <div>
   <h1>This is Subcomponents</h1>
   <input type="button" value="This is the button in the child component - click it to trigger the func method passed by the parent component" @click="myclick">
  </div>
 </template>
 // Define a literal component template object  var com2 = {
   template: '#tmpl', // By specifying an Id, it means that the content in the template element of this specified Id is to be loaded as the HTML structure of the component   data() {
    return {
     sonmsg: { name: 'Little Head Son', age: 6 }
    }
   },
   methods: {
    myclick() {
     // When clicking the button of the child component, how to get the func method passed by the parent component and call this method?  ?  ?     // emit English original meaning: It means trigger, call, and launch     // this.$emit('func123', 123, 456)
     this.$emit('func', )
    }
   }
  }
  // Create a Vue instance and get a ViewModel  var vm = new Vue({
   el: '#app',
   data: {
    datamsgFormSon: null
   },
   methods: {
    show(data) {
     // ('The show method on the parent component was called: --- ' + data)     (data);
      = data
    }
   },
   components: {
    com2
    // com2: com2
   }
  });

<div >
  <cmt-box @func="loadComments"></cmt-box>
  <ul class="list-group">
   <li class="list-group-item" v-for="item in list" :key="">
    <span class="badge">Commenter： {{  }}</span>
    {{  }}
   </li>
  </ul>
 </div>
 <template >
  <div>
   <div class="form-group">
    <label>Commenter：</label>
    <input type="text" class="form-control" v-model="user">
   </div>
   <div class="form-group">
    <label>Comment content：</label>
    <textarea class="form-control" v-model="content"></textarea>
   </div>
   <div class="form-group">
    <input type="button" value="Leave a Comment" class="btn btn-primary" @click="postComment">
   </div>
  </div>
 </template>
var commentBox = {
   data() {
    return {
     user: '',
     content: ''
    }
   },
   template: '#tmpl',
   methods: {
    postComment() { // How to post a comment     // Analysis: Business logic for posting comments     // 1. Where does the comment data go?  ?  ?   Stored in localStorage ('cmts', '')     // 2. First organize a latest comment data object     // 3. Find a way to save the comment object obtained in the second step into localStorage:     // 3.1 localStorage only supports storing string data, and you must call it first     // 3.2 Before saving the latest comment data, you must first obtain the previous comment data (string) from localStorage, convert it into an array object, and then push the latest comment to this array     // 3.3 If the comment string in the obtained localStorage is empty and does not exist, then '[]' can be returned to convert     // 3.4 Call the latest comment list array again to convert the array string, and then call ()     var comment = { id: (), user: , content:  }
     // Get all comments from localStorage     var list = (('cmts') || '[]')
     (comment)
     // Resave the latest comment data     ('cmts', (list))
      =  = ''
     // () // ?????
     this.$emit('func')
    }
   }
  }
  // Create a Vue instance and get a ViewModel  var vm = new Vue({
   el: '#app',
   data: {
    list: [
     { id: (), user: 'Li Bai', content: 'I was born with a useful body' },
     { id: (), user: 'Jiang Xiaobai', content: 'I advise you to have a glass of wine' },
     { id: (), user: 'pony', content: 'My surname is Ma, and the horse that shows cattle and sheep when the wind blows the grass and is low.' }
    ]
   },
   beforeCreate(){ // Note: The loadComments method cannot be called here, because when executing this hook function, both data and methods have not been initialized yet   },
   created(){
    ()
   },
   methods: {
    loadComments() { // From the local localStorage, load the comment list     var list = (('cmts') || '[]')
      = list
    }
   },
   components: {
    'cmt-box': commentBox
   }
  });

 <div >
  <input type="button" value="Get Element" @click="getElement" ref="mybtn">
  <h3  ref="myh3">Hahaha， The weather is so good today！！！</h3>
  <hr>
  <login ref="mylogin"></login>
 </div>
var login = {
   template: '<h1>Login component</h1>',
   data() {
    return {
     msg: 'son msg'
    }
   },
   methods: {
    show() {
     ('The method of the child component was called')
    }
   }
  }
  // Create a Vue instance and get a ViewModel  //There is a property in vm called ref  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getElement() {
     // (('myh3').innerText)
     // ref is English word [reference] value type and reference type referenceError     // (this.$refs.)
     (this.$)
     this.$()
    }
   },
   components: {
    login
   }
  });