Vue--this.$refs 獲取dom元素和組件（獲取子組件的dom和方法）

時間  2020-12-14
標籤 html vue app this spa code component htm blog 欄目 HTML 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="獲取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今每天氣太好了！！！</h3>

    <hr>

    <login ref="mylogin"></login>
  </div>

  <script>

    var login = { template: '<h1>登陸組件</h1>', data() { return { msg: 'son msg' } }, methods: { show() { console.log('調用了子組件的方法') } } } // 建立 Vue 實例，獲得 ViewModel
    var vm = new Vue({ el: '#app', data: {}, methods: { getElement() { // console.log(document.getElementById('myh3').innerText)

          // ref 是 英文單詞 【reference】 值類型 和 引用類型 referenceError
          // console.log(this.$refs.myh3.innerText)

          // console.log(this.$refs.mylogin.msg)
          // this.$refs.mylogin.show()
 } }, components: { login } }); </script>
</body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程