vue-親子のコンポーネントとrefの実例は詳しく説明します。

親コンポーネントはサブアセンブリに値を送る。

<div id="app">
  <!--    ，           ，        （v-bind:）    ,               ，        ，        ，       -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
//    Vue   ，   ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123  -       '
   },
   methods: {},
   components: {
    //   ：    ，  ，    ，              data        methods     
    com1: {
     data() { //   ：       data   ，              ，          ，  ：       Ajax ，       ，      data   ；
      // data     ，       ；
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h1 @click="change">      --- {{ parentmsg }}</h1>',
     //   ：         props     ，               
     // props     ，     ，      
     props: ['parentmsg'], //           parentmsg   ，   props    ，    ，  ，        ，  ，       
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '    '
      }
     }
    }
   }
  });

親コンポーネントからサブアセンブリへの方法

<div id="app">
  <!--              ，           ； v-on,                  ，  ，      ，      ，                 -->
  <com2 @func="show"></com2>
 </div>
 <template id="tmpl">
  <div>
   <h1>      </h1>
   <input type="button" value="          -    ，            func   " @click="myclick">
  </div>
 </template>
 //                   
  var com2 = {
   template: '#tmpl', //         Id,     ，         Id  template       ，      HTML  
   data() {
    return {
     sonmsg: { name: '    ', age: 6 }
    }
   },
   methods: {
    myclick() {
     //             ，               func   ，       ？？？
     // emit     ：    ，  、     
     // this.$emit('func123', 123, 456)
     this.$emit('func', this.sonmsg)
    }
   }
  }
  //    Vue   ，   ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    datamsgFormSon: null
   },
   methods: {
    show(data) {
     // console.log('          show   : --- ' + data)
     console.log(data);
     this.datamsgFormSon = data
    }
   },
   components: {
    com2
    // com2: com2
   }
  });

Vue+ローカルストレージはコメント機能を実現します。
もしかして、親のコンポーネントをサブアセンブリに送る方法を理解することですか？

<div id="app">
  <cmt-box @func="loadComments"></cmt-box>
  <ul class="list-group">
   <li class="list-group-item" v-for="item in list" :key="item.id">
    <span class="badge">   ： {{ item.user }}</span>
    {{ item.content }}
   </li>
  </ul>
 </div>
 <template id="tmpl">
  <div>
   <div class="form-group">
    <label>   ：</label>
    <input type="text" class="form-control" v-model="user">
   </div>
   <div class="form-group">
    <label>    ：</label>
    <textarea class="form-control" v-model="content"></textarea>
   </div>
   <div class="form-group">
    <input type="button" value="    " class="btn btn-primary" @click="postComment">
   </div>
  </div>
 </template>
var commentBox = {
   data() {
    return {
     user: '',
     content: ''
    }
   },
   template: '#tmpl',
   methods: {
    postComment() { //        
     //   ：         
     // 1.          ？？？       localStorage   localStorage.setItem('cmts', '')
     // 2.                
     // 3.    ，      ，       ，    localStorage  ：
     // 3.1 localStorage           ，      JSON.stringify 
     // 3.2               ，    localStorage           （string），            ，   ，      ， push      
     // 3.3        localStorage         ，     ，           '[]'   JSON.parse    
     // 3.4             ，     JSON.stringify         ，     localStorage.setItem()
     var comment = { id: Date.now(), user: this.user, content: this.content }
     //   localStorage         
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     list.unshift(comment)
     //             
     localStorage.setItem('cmts', JSON.stringify(list))
     this.user = this.content = ''
     // this.loadComments() // ?????
     this.$emit('func')
    }
   }
  }
  //    Vue   ，   ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    list: [
     { id: Date.now(), user: '  ', content: '       ' },
     { id: Date.now(), user: '   ', content: '       ' },
     { id: Date.now(), user: '  ', content: '   ，          ' }
    ]
   },
   beforeCreate(){ //   ：       loadComments   ，              ，data   methods          
   },
   created(){
    this.loadComments()
   },
   methods: {
    loadComments() { //      localStorage  ，      
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     this.list = list
    }
   },
   components: {
    'cmt-box': commentBox
   }
  });

refはDOMとコンポーネントを取得する。
vueでDOMをどう操作しますか？

 <div id="app">
  <input type="button" value="    " @click="getElement" ref="mybtn">
  <h3 id="myh3" ref="myh3">   ，        ！！！</h3>
  <hr>
  <login ref="mylogin"></login>
 </div>
var login = {
   template: '<h1>    </h1>',
   data() {
    return {
     msg: 'son msg'
    }
   },
   methods: {
    show() {
     console.log('         ')
    }
   }
  }
  //    Vue   ，   ViewModel
  //vm       ref
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getElement() {
     // console.log(document.getElementById('myh3').innerText)
     // ref        【reference】             referenceError
     // console.log(this.$refs.myh3.innerText)
     console.log(this.$refs.mylogin.msg)
     this.$refs.mylogin.show()
    }
   },
   components: {
    login
   }
  });

締め括りをつける
以上は小编で绍介したvue-亲子のコンポーネントとrefの実例です。