Vue 中多个组件可以共享数据和方法 Mixin 的用法

本文主要是介绍Vue 中多个组件可以共享数据和方法 Mixin 的用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

⭐️⭐️⭐️ 作者：船长在船上
🚩🚩🚩 主页：来访地址船长在船上的博客
🔨🔨🔨 简介：资深前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

🔔🔔🔔 感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。

项目需求：计算表格table的高度，mixin分全局引用和局部引用

新建mixin.js

export const publicMinxin= {data() {return {screenHeight: document.body.clientHeight, // 默认值tableHeight: null, // 表格高度 }},methods: {getTbHeight() {var toolbarFormH=document.getElementById("toolbar-form").offsetHeight;this.tableHeight =this.screenHeight -toolbarFormH-331-14;// 初始化表格高度},},}

局部使用

在index.vue使用：

<el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight">
</el-table>
<script>import {publicMinxin} from "../../utils/mixin"export default{mounted(){this.getTbHeight();}}
</script>

全局使用

main.js引入：注意引入时候要放在Vue实例之前

import {publicMinxin} from "./utils/mixin"
Vue.mixin(publicMinxin)

在index.vue使用：

<el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight">
</el-table>
<script>//直接使用export default{mounted(){this.getTbHeight();}}
</script>