通过$ref来操作DOM元素和组件

要点:

这里的$ref相关的操作就是为了避免操作DOM,Vue提供的方案。效果等同于原生的id,然后操作

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
      <div id="app">
          <input type="button" value="获取元素" @click="getElement">
          <h3 ref="showcool">陈小帅是真的帅呢?</h3>

          <show ref="myshow"></show>
      </div>
      
      <script>
          var show = {
              template:'<h1>谁说不是呢?哈哈哈</h1>',
              data(){
                  return{
                      msg:'子组件的msg'
                  }
              }
          };
          
          var vm = new Vue({
              el:'#app',
              methods:{
                  getElement(){
                     // console.log(this.$refs.showcool.innerText);
                      console.log(this.$refs.myshow.msg);
                      //ref是reference缩写,s表示复数
                  }
              },
              components:{
                  show
              }
          });
      </script>
</body>
</html>

效果:


 

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82956674
今日推荐