• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    vue:ref的作用和使用方法

    時間:2022-05-02 10:41:54 類型:vue
    字號:    

    ref屬性相當于給標簽設置了一個ID,可以使用該特殊標識來進行一些DOM的操作,但是使用的時候有如下幾個注意事項:

    <template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">獲取test節點</button>
      </div>
    </template>
    <script>
            export default {  
                    methods: {    
                                getTest() {    
                                          console.log(this.$refs.testDom)
                                }
                      }
            };
    </script>

    調用子組件中的data

    子組件:

    <template>
      <div>
          {{ msg }}  
       </div>
     </template>
     <script>
             export default {  
                                 data() {    
                                         return {msg: "hello world"}
                                  }
                             }
      </script>

    父組件:

    <template>
      <div id="app">
        <HelloWorld ref="hello"/>
        <button @click="getHello">獲取helloworld組件中的值</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {}
      },
      methods: {
        getHello() {
          console.log(this.$refs.hello.msg)
        }
      }
    };
    </script>


    黄片基地 <