Vue组件通信5—-ref通信

Vue组件通信5—-ref通信用ref为自己的DOM做标记,然后利用this.$refs来获得从而进行操作/*ref-绑定dom节点,拿到的就是dom对象ref-绑定组件,拿到的就是组件对象*/<body><divid=”box”><childref=”mychild”></child></div><script>Vue.c…

Vue组件通信5----ref通信"

ref为自己的DOM做标记,然后利用this.$refs来获得从而进行操作

/*
        ref -绑定dom节点,拿到的就是 dom对象
        ref -绑定组件,拿到的就是 组件对象
      */

<body>
    <div id="box">
    
       <child ref="mychild"></child>
    </div>
    <script>

      Vue.component("child",{
        data(){
          return {
            myname:"child-111111111111111111111"
          }
        },
        template:`<div>
          child---{
  
  {myname}}  
        </div>`
      })

      new Vue({
        el:"#box",
        methods:{
          handleAdd(){
               this.$refs.mychild.myname="child-2222222222222222"
          }
        }
      })

      
    </script>
</body>

今天的文章Vue组件通信5—-ref通信分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32214.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注