Vue2---父子元件之間的訪問

龍恩0707發表於2017-05-04
Vue元件
個人小總結：1年多沒有寫部落格，感覺很多知識點生疏了，雖然工作上能解決問題，但是當別人問到某個知識點的時候，還是迷迷糊糊的，所以堅持寫部落格是硬道理的，因為大腦不可能把所有的知識點記住，有可能某一天忘了，但是我們工作上還是會使用，只是理論忘了，所以寫部落格的好處是可以把之前的東西重新看一遍後會在大腦裡面重新浮現起來，特別在面試的時候，別人問你的知識點的時候答不上來那種尷尬，但是平時經常使用到，只是說不出所以來的，因此寫部落格是最好的思路。

閱讀目錄

Vue2--父子元件的訪問

父元件訪問子元件，子元件訪問父元件，或者子元件訪問根元件，Vue.js 都提供了相對應的API。
1. 父元件訪問子元件，使用 $children 或 $refs
2. 子元件訪問父元件；使用 $parent
如下程式碼定義了 父元件<parent-component>，父元件模板定義了2個子元件；在父元件中，通過 this.$children 可以訪問子元件。
this.$children 是一個陣列，它包含所有子元件的實列；如下程式碼：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component1">
      <p>{{ msg }}</p>
    </template>
    <template id="child-component2">
      <p>{{ msg }}</p>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component1></child-component1><child-component2></child-component2><button @click="showmsg">顯示子元件的資料</button></div>', 
      components: {
        'child-component1': {
          template: '#child-component1',
          data: function() {
            return {
              msg: '這是子元件1'
            }
          }
        },
        'child-component2': {
          template: '#child-component2',
          data: function() {
            return {
              msg: '這是子元件2'
            }
          }
        }
      },
      methods: {
        showmsg: function() {
          for (var i = 0; i < this.$children.length; i++) {
            alert(this.$children[i].msg);
          }
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>

檢視效果

理解$refs
在子元件上使用 ref指令，可以給子元件指定一個索引ID，如下程式碼：

<child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2>

在父元件中，則通過$refs.索引ID訪問子元件的例項：

showmsg: function() {
  alert(this.$refs.A1.msg);
  alert(this.$refs.A2.msg);
}

所有的程式碼如下：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component1">
      <p>{{ msg }}</p>
    </template>
    <template id="child-component2">
      <p>{{ msg }}</p>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2><button @click="showmsg">顯示子元件的資料</button></div>', 
      components: {
        'child-component1': {
          template: '#child-component1',
          data: function() {
            return {
              msg: '這是子元件1'
            }
          }
        },
        'child-component2': {
          template: '#child-component2',
          data: function() {
            return {
              msg: '這是子元件2'
            }
          }
        }
      },
      methods: {
        showmsg: function() {
          alert(this.$refs.A1.msg);
          alert(this.$refs.A2.msg);
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>

檢視效果

理解$parent
下面有一個子元件 child-component 和一個父元件 parent-component, 在子元件中，通過 this.$parent 可以訪問到父元件的例項；如下程式碼：

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>演示Vue</title>
    </head>
    <div id='app'>
      <parent-component></parent-component>
    </div> 
    <template id="child-component">
      <div>
        <p>111111</p>
        <button @click="showmsg">顯示父元件的例項</button>
      </div>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    Vue.component('parent-component', {
      template: '<div><child-component></child-component></div>', 
      components: {
        'child-component': {
          template: '#child-component',
          methods: {
            showmsg: function() {
              alert(this.$parent.msg);
            }
          }
        }
      },
      data: function() {
        return {
          msg: 'parent component msg'
        }
      }
    });
    new Vue({
      el: '#app'
    })
  </script>
</html>

檢視效果

相關文章