vue-父子組件和ref實(shí)例詳解

<div id="app">
  <!-- 父組件，可以在引用子組件的時(shí)候， 通過(guò) 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數(shù)據(jù)，以屬性綁定的形式，傳遞到子組件內(nèi)部，供子組件使用 -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 啊-父組件中的數(shù)據(jù)'
   },
   methods: {},
   components: {
    // 結(jié)論：經(jīng)過(guò)演示，發(fā)現(xiàn)，子組件中，默認(rèn)無(wú)法訪問(wèn)到 父組件中的 data 上的數(shù)據(jù) 和 methods 中的方法
    com1: {
     data() { // 注意： 子組件中的 data 數(shù)據(jù)，并不是通過(guò) 父組件傳遞過(guò)來(lái)的，而是子組件自身私有的，比如： 子組件通過(guò) Ajax ，請(qǐng)求回來(lái)的數(shù)據(jù)，都可以放到 data 身上；
      // data 上的數(shù)據(jù)，都是可讀可寫(xiě)的；
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h2 @click="change">這是子組件 --- {{ parentmsg }}</h2>',
     // 注意： 組件中的 所有 props 中的數(shù)據(jù)，都是通過(guò) 父組件傳遞給子組件的
     // props 中的數(shù)據(jù)，都是只讀的，無(wú)法重新賦值
     props: ['parentmsg'], // 把父組件傳遞過(guò)來(lái)的 parentmsg 屬性，先在 props 數(shù)組中，定義一下，這樣，才能使用這個(gè)數(shù)據(jù)，只讀，寫(xiě)的話會(huì)報(bào)警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });

<div id="app">
  <!-- 父組件向子組件 傳遞 方法，使用的是 事件綁定機(jī)制； v-on, 當(dāng)我們自定義了 一個(gè) 事件屬性之后，那么，子組件就能夠，通過(guò)某些方式，來(lái)調(diào)用 傳遞進(jìn)去的 這個(gè) 方法了 -->
  <com2 @func="show"></com2>
 </div>
 <template id="tmpl">
  <div>
   <h2>這是 子組件</h2>
   <input type="button" value="這是子組件中的按鈕 - 點(diǎn)擊它，觸發(fā) 父組件傳遞過(guò)來(lái)的 func 方法" @click="myclick">
  </div>
 </template>
 // 定義了一個(gè)字面量類型的 組件模板對(duì)象
  var com2 = {
   template: '#tmpl', // 通過(guò)指定了一個(gè) Id, 表示 說(shuō)，要去加載 這個(gè)指定Id的 template 元素中的內(nèi)容，當(dāng)作 組件的HTML結(jié)構(gòu)
   data() {
    return {
     sonmsg: { name: '小頭兒子', age: 6 }
    }
   },
   methods: {
    myclick() {
     // 當(dāng)點(diǎn)擊子組件的按鈕的時(shí)候，如何 拿到 父組件傳遞過(guò)來(lái)的 func 方法，并調(diào)用這個(gè)方法？？？
     // emit 英文原意： 是觸發(fā)，調(diào)用、發(fā)射的意思
     // this.$emit('func123', 123, 456)
     this.$emit('func', this.sonmsg)
    }
   }
  }
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    datamsgFormSon: null
   },
   methods: {
    show(data) {
     // console.log('調(diào)用了父組件身上的 show 方法: --- ' + data)
     console.log(data);
     this.datamsgFormSon = data
    }
   },
   components: {
    com2
    // com2: com2
   }
  });

<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">評(píng)論人： {{ item.user }}</span>
    {{ item.content }}
   </li>
  </ul>
 </div>
 <template id="tmpl">
  <div>
   <div class="form-group">
    <label>評(píng)論人：</label>
    <input type="text" class="form-control" v-model="user">
   </div>
   <div class="form-group">
    <label>評(píng)論內(nèi)容：</label>
    <textarea class="form-control" v-model="content"></textarea>
   </div>
   <div class="form-group">
    <input type="button" value="發(fā)表評(píng)論" class="btn btn-primary" @click="postComment">
   </div>
  </div>
 </template>
var commentBox = {
   data() {
    return {
     user: '',
     content: ''
    }
   },
   template: '#tmpl',
   methods: {
    postComment() { // 發(fā)表評(píng)論的方法
     // 分析：發(fā)表評(píng)論的業(yè)務(wù)邏輯
     // 1. 評(píng)論數(shù)據(jù)存到哪里去？？？  存放到了 localStorage 中 localStorage.setItem('cmts', '')
     // 2. 先組織出一個(gè)最新的評(píng)論數(shù)據(jù)對(duì)象
     // 3. 想辦法，把 第二步中，得到的評(píng)論對(duì)象，保存到 localStorage 中：
     // 3.1 localStorage 只支持存放字符串?dāng)?shù)據(jù)， 要先調(diào)用 JSON.stringify 
     // 3.2 在保存 最新的 評(píng)論數(shù)據(jù)之前，要先從 localStorage 獲取到之前的評(píng)論數(shù)據(jù)（string）， 轉(zhuǎn)換為 一個(gè) 數(shù)組對(duì)象， 然后，把最新的評(píng)論， push 到這個(gè)數(shù)組
     // 3.3 如果獲取到的 localStorage 中的 評(píng)論字符串，為空不存在， 則 可以 返回一個(gè) '[]' 讓 JSON.parse 去轉(zhuǎn)換
     // 3.4 把 最新的 評(píng)論列表數(shù)組，再次調(diào)用 JSON.stringify 轉(zhuǎn)為 數(shù)組字符串，然后調(diào)用 localStorage.setItem()
     var comment = { id: Date.now(), user: this.user, content: this.content }
     // 從 localStorage 中獲取所有的評(píng)論
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     list.unshift(comment)
     // 重新保存最新的 評(píng)論數(shù)據(jù)
     localStorage.setItem('cmts', JSON.stringify(list))
     this.user = this.content = ''
     // this.loadComments() // ?????
     this.$emit('func')
    }
   }
  }
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    list: [
     { id: Date.now(), user: '李白', content: '天生我材必有用' },
     { id: Date.now(), user: '江小白', content: '勸君更盡一杯酒' },
     { id: Date.now(), user: '小馬', content: '我姓馬， 風(fēng)吹草低見(jiàn)牛羊的馬' }
    ]
   },
   beforeCreate(){ // 注意：這里不能調(diào)用 loadComments 方法，因?yàn)樵趫?zhí)行這個(gè)鉤子函數(shù)的時(shí)候，data 和 methods 都還沒(méi)有被初始化好
   },
   created(){
    this.loadComments()
   },
   methods: {
    loadComments() { // 從本地的 localStorage 中，加載評(píng)論列表
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     this.list = list
    }
   },
   components: {
    'cmt-box': commentBox
   }
  });

 <div id="app">
  <input type="button" value="獲取元素" @click="getElement" ref="mybtn">
  <h4 id="myh4" ref="myh4">哈哈哈， 今天天氣太好了?。?！</h4>
  <hr>
  <login ref="mylogin"></login>
 </div>
var login = {
   template: '<h2>登錄組件</h2>',
   data() {
    return {
     msg: 'son msg'
    }
   },
   methods: {
    show() {
     console.log('調(diào)用了子組件的方法')
    }
   }
  }
  // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
  //vm中有一個(gè)屬性叫ref
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getElement() {
     // console.log(document.getElementById('myh4').innerText)
     // ref 是 英文單詞 【reference】  值類型 和 引用類型 referenceError
     // console.log(this.$refs.myh4.innerText)
     console.log(this.$refs.mylogin.msg)
     this.$refs.mylogin.show()
    }
   },
   components: {
    login
   }
  });