vue获取组件实例,vue中的mixin

　　本文主要介绍Vue组件通用方法抽取混合的实现。当多个组件共享一个方法时，它们可以使用mixin提取到一个js文件中。作为分享的方法，我们一起入文了解更多细节。

一.应用场景

　　当多个组件共享一个方法时，可以用mixin将它们提取到一个js文件中作为共享方法。

二.实现方法

1.提取js共用方法文件

　　导出常用常量={

　　//组件共享属性-

　　data() {

　　返回{

　　年龄：18 //设置共有房产

　　}

　　//-

　　//组件共享方法-。

　　方法：{

　　showName() {

　　Alert(this.name) //弹出组件中name属性的共享方法

　　}

　　//-

　　//安装组件时的共享方法-

　　已安装(){

　　Console.log(初始化方法)//挂载时调用

　　//-

　　}

2.引入

　　模板

　　差异

　　组件/分区

　　Button @click=showName 弹出名称/按钮

　　/div

　　/模板

　　脚本

　　//在js文件中引入方法对象-。

　　从导入{common，}./pub_js/common.js

　　//-

　　导出默认值{

　　姓名：学生，

　　data() {

　　返回{

　　姓名：“张三”

　　}

　　//调用mixin将组件js与公共js合并-

　　mixins:【常见，】，

　　//-

　　}

　　/脚本

三.注意事项

　　1.1.data中的属性合并后，如果有命名冲突，以组件中的属性为准。[组件属性覆盖共享js中的属性] 2。方法中的方法合并后，组件中的方法将优先。[组件方法覆盖共享js中的方法] 3。3.mounted等生命周期方法合并后，会先调用共享js中的生命周期函数。然后调用组件中的生命周期函数，【不会涉及】4。如果是全局共享的方法，可以直接挂载在main . js从 vue 导入Vue

　　从导入应用程序。/App.vue

　　Vue.config.productionTip=false

　　//挂载全局共享方法-。

　　从“pub_js/common.js”导入{common，}

　　Vue.mixin(通用)

　　//-

　　新Vue({

　　render: h=h(App)，

　　}).$ mount(“# app”)

　　这就是这篇关于Vue组件公共方法提取mixin实现的文章。更多相关Vue组件提取内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。