欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 使用ref 讓父組件調(diào)用子組件的方法

 更新時(shí)間：2018年02月08日 15:00:04   作者：阿豪boy  
這篇文章主要介紹了vue 使用ref 讓父組件調(diào)用子組件的方法,需要的朋友可以參考下

父級(jí)組件上的三個(gè)按鈕可以

調(diào)用子組件loading的三個(gè)方法，執(zhí)行不同的操作

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <loading ref='load'></loading>
    <button type="button" @click='show'>顯示</button>
    <button type="button" @click='hide'>隱藏</button>
    <button type="button" @click='changeColor'>變色</button>
  </div>
</body>
<script type="text/javascript">
  let loading = {
    data() {
      return {
        flag: true
      }
    },
    template: '<div v-show="flag">loading...</div>',
    methods: {
      hide() {
        this.flag = false
      },
      show() {
        this.flag = true
      }
    }
  }
  let vm = new Vue({
    el: '#app',
    components: {
      loading
    },
    methods: {
      // 在組件上的ref獲取組件實(shí)例
      // 標(biāo)簽的ref 獲得標(biāo)簽的dom
      // 使用refs 獲取組件實(shí)例，然后調(diào)用組件的方法即可
      hide() {
        this.$refs.load.hide()
      },
      show() {
        this.$refs.load.show()
      },
      changeColor() {
        // 獲取dom實(shí)例 操作樣式
        this.$refs.load.$el.style.background = 'red'
      }
    }
  })
</script>
</html>

總結(jié)

以上所述是小編給大家介紹的vue 使用ref 讓父組件調(diào)用子組件的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論