Vue学习日记之获取DOM节点

  我们可以使用ref来实现获取DOM节点

1.   我们在需要获取的DOM节点上添加属性，ref='id'。

2. 使用this.$refs.id来获取DOM对象

<div id="app">
    <h3 ref="myh3">这是h3的内容</h3>
    <input type="button" value="点击" @click="getByText">
    <hr>
     <com1 ref="com1"></com1>
</div>
<template id='com1'>
  <div>
  <div/>
</template>
<script>

    /*
    * vue实例中获取DOM节点非常简单，只需要在该节点上添加属性ref='id'，使用this.$ref.id就能获得这个节点的对象了，
    *   我们还可以给组件添加ref='id'，来获得组件元素
    * */
    var vm=new Vue({
        el:"#app",
        data:{

        },
        methods:{
            getByText:function () {
               this.$refs.com1.show();
               console.log(this.$refs.myh3.innerText);
               console.log(this.$refs.com1.msg);
            }
        },
        components:{
          com1:{
              template:"#com1",
              data:function () {
               return{
                   msg:"子组件中的msg被调用了"
               }
              },
              methods:{
                  show:function () {
                      console.log("show方法被调用了");
                  }
              }
          }
        },
        filters:{

        },
        directives:{

        }
    })
</script>

运行截图：

我们可以看到我们还可以给一个组件标签一个ref='id'来调用组件中的数据和函数