Vue 2.0 refs无法获取子组件的dom节点

新手上路,请多包涵

1.获取子组件的内容为什么输出undefined呀
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
<script type="text/javascript" src="js/vue.js">
    
</script>
</head>
<body>    
    <div id="app">
        <button type="button" @click="a">点我然后打开控制台</button>
        <div id="app1" ref="myid1">
            {{msg1}}
        </div>
        <aaa :msg2='msg2' ref="mytem1"></aaa>
        <button type="button" @click="b">点我然后打开控制台</button>            
    </div>
<script type="text/javascript">
     var vm=new Vue({
         data:{
             msg1:"hello,this is Dom",
             msg2:"this is a template and data form Daddy",
         },
         methods:{
             a:function(){
                 var idl=this.$refs.myid1.innerHTML;
                 
                 console.log(idl);
                 },
             b:function(){
                 var idk=this.$refs.mytem1.innerHTML;
                 console.log(idk); 
             },     
         },
         components:{    
             'aaa':{
                 template:`
                 <div>
               {{msg2}}
           </div>`,
                 props:['msg2'],
                
                 },

             },
 
     }).$mount("#app");
</script>
</body>

</html>

阅读 3.5k
1 个回答

应该是this.$refs.mytem1.innerHTML取不到值吧。

原因:ref="mytem1"是挂载在组件aaa,所以this.$refs.mytem1指向的是一个组件,而不是dom,所以没有innerHTML属性。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题