vue实现将某个dom元素或组件挂载到根节点

Posted 2023-04-18

参考技术A 在写手机端的时候经常用到tab，tab切换一般都是transition滑动的，如果此时我们用position:fixed定位会发现，元素定位并不是我们想象中的相对浏览器定位，这是因为fixed定位会被拥有transition属性的元素影响。

为了结果这个问题，我们需要将元素变成相对于浏览器定位，这个时候我们就要将这个需要定位的dom元素挂载到根节点下，实现方式如下

import hello from "@/components/HelloWorld.vue";

mounted()

    this.appendCompToRoot(hello);

,
appendCompToRoot(component)  

    //component 参数为组件名

      var instance = new Vue(

        el: document.createElement("div"),

        render: h => h(component)

      );

      document.body.appendChild(instance.$el);



 <div class="home">    

        <h1>home</h1>   

         <div id="mountDiv" ref="mountDiv">      

                <img src="logo.png" alt />   

         </div> 

 </div> 

 mounted() 

    this.appendDomToRoot(document.querySelector("#mountDiv"), "#container");

 ,

appendDomToRoot(el, selector) 

    //el 为要操作的dom元素，selector为要插入的根节点的选择器，为空的话，直接插入到body中 

      var container;

      if (selector) 

        container = document.querySelector(selector);

      

      if (!container) 

        container = document.body;

      

      container.appendChild(el);

    ,

<teleport to="#app">

      <div id="mountDiv" ref="mountDiv">

            <img src="logo.png" alt />

      </div>

</teleport>

vue中的ref和$refs的使用

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

普通的DOM元素上使用

<div id="app7">
  <input type="text"ref="TEXT"/ >
  <button @click="add">添加</button>
</div>

var app7=new Vue({
  el:"#app7",
  data:{
 
  },
  methods:{
    add:function(){
      console.log(this.$refs);
    }
  }
})

　　

子组件上使用

<div id="app7">
  <aaa ref=inputText></aaa>
  <input type="text"ref="TEXT" >
  <button @click="add">添加</button>
</div>
Vue.component(‘aaa‘,{
   template:"<div>我是一个组件</div>"
 })
 var app7=new Vue({
   el:"#app7",
   data:{
 
   },
   methods:{
     add:function(){
       console.log(this.$refs.inputText);
       console.log(this.$refs);
     }
   }
 })
 var aaa=app7.$refs.inputText;
 //console.log(aaa);
 //console.log(aaa.$el.innerText);

　

refs只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

 

 

例：我做增删改查， 模态框单独分成了一个组件， 在父组件中如何调用子组件的 方法，而且传数据到子组件，

一、首先先定义一个子组件，并引入

<listEditDialog ref="editDialog"></listEditDialog>
//这是父页面，引用了listEditDialog 子组件 定义了一个ref属性

　

二、假如我使用了一个表格， 里面有个修改的按钮

 <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="150"></el-table-column>
        <el-table-column prop="title" label="标题" width="120"></el-table-column>
        <el-table-column label="图片" width="120">
          <div slot-scope="scope" class="Img">
            <img :src="scope.row.bannerUrl" alt />
          </div>
        </el-table-column>
        <el-table-column prop="mark" label="备注" width="120"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="300"></el-table-column>
        <el-table-column prop="sort" label="排序" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="120" :formatter="formStatus"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="editBefore(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="deleteData(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

　　

三、点击编辑，调用子组件的方法，并且把这一行的数据传给子组件

methods: {
    editBefore(row) {
      this.$refs.editDialog.edit(row);　　//这里使用$refs  editDialog是上面定义的ref名字，  edit是子组件的方法名字    row是吧数据传给子组件模态框。  这一句话就实现了父组件调用了子组件的方法并且传了数据给子组件

} },

　　

四、子页面的代码

methods: {

edit(row) {
      console.log(row)
      this.dialogFormVisible = true;
}
}