Vue中在组件中单独使用this

最新推荐文章于 2024-03-22 11:58:23 发布

儒雅的烤地瓜

最新推荐文章于 2024-03-22 11:58:23 发布

阅读量1k

点赞数

分类专栏： Vue.js 文章标签： vue.js 全局组件 component prototype Vue.use

本文链接：https://blog.csdn.net/sunyctf/article/details/127721085

版权

Vue.js 专栏收录该内容

47 篇文章 24 订阅

订阅专栏

🔽 全局注册

🔽 局部注册

🔽 组件使用总结

🔽 全局注册

1、Vue.prototype

在多个地方都需要使用但不想污染全局作用域的情况下，这样定义，在每个 Vue 实例中都可用。
$ 表示这是一个在 Vue 所有实例中都可用的属性，常用于方法、变量等

vue.prototype：实例上挂载属性/方法

每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

//main.js
import Video from 'video.js'
Vue.prototype.$video= Video//设置新的公共方法或属性为$video

// 某个页面使用注册好的组件$video
initVideo() {
  //初始化视频方法
  let myPlayer = this.$video(myVideo, {
    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
    controls: true,
    //自动播放属性,muted:静音播放
    autoplay: "muted",
    //  autoplay: "muted",
    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
    preload: "auto",
    //设置视频播放器的显示宽度（以像素为单位）
    width: "1300px",
    //设置视频播放器的显示高度（以像素为单位）
    height: "500px"
  });
}

prototype设置实例为什么要以$开头？

$ 是在 Vue 所有实例中都可用的 property 的一个简单约定，一种规范。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

参考：添加实例 property

2、vue.component

全局注册组件，Vue.component('组件名',对象)。

第一个参数是调用组件时写的组件名

第二个参数是引入组件时写的名称

可用于注册自定义组件

import myLoading from 'base/loading'
Vue.component('my-Loading',myLoading);//初始化组件
//在其他页面使用初始化的组件
//<my-Loading><my-Loading/>

3、Vue.use

Vue.use(对象)

同样是全局注册，和component的区别是接收的参数必须有install方法

🎈 常用于注册第三方插件

import ElementUI from 'element-ui';
Vue.use(ElementUI);

🎈自定义插件/组件

Vue的插件是一个对象，插件对象必须有install字段。install字段是一个函数。初始化插件对象需要通过Vue.use()

使用install方法，要通过搭配全局方法 Vue.use() 使用插件（Vue.use()全局注册在main.js使用）。

//plugin.js
import moment from 'moment'
// 写插件 自定义插件/组件  并全局注册组件，但还要在main.js中全局注册一次，让其起作用
export default{
  // install  下载 必须要写  不用自己调用，vue调用     install  通过搭配全局方法 Vue.use() 使用插件（main.js使用）。
//install方法可以解决防止插件多次注册  里面的vue参数是一个对象
  install(Vue){
    console.log('@',Vue)
    Vue.prototype.$hello=function(){ console.log('hello')}
    // 时间戳
    Vue.filter('fmDate',function(value,a='YYYY'){
      return moment(value).format(a)
    })
  // 全局自定义指令
  // 自动将当前带有该指令的元素对象e,b传给回调函数的形参
  Vue.directive('small',function(e,b){
    e.innerText=b.value/10;
  });
  }
  
}//vue提供install可供我们开发新的插件及全局注册组件

//main.js
// 全局使用插件
import cj from './plugin'
Vue.use(cj)

🔽 局部注册

局部注册实例：

components：{App，}。注意：全局注册是Vue.component()。

<template>
  <!-- 主页 用来链接路由 -->
  <div id="app">
    <!-- 3、使用组件 -->
    <Head/>  
    <router-view/>
    <Foot/>
  </div>
</template>

<script>
// 1、引入组件  公共组件
import Head from '../src/views/components/Head.vue';
import Foot from '../src/views/components/Foot.vue';
// export default默认导出
export default {
  // 2、注册组件  才能在上面用来链接路由
  components:{
    Head,
    Foot,
  },
  
}
</script>