<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      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>


      黄网站免费 <