论坛 › 脚本开发 › [油猴脚本开发指南]vue组件

李恒道 发表于 2021-10-16 18:09:06

[油猴脚本开发指南]vue组件

# 前文

这节课我们学习一下组件，组件是什么东西呢

我们在写代码的时候，如果界面较为复杂

我们会在一个页面写了接近十万乃至上百万的情况(不写油猴的时候)

那我们有没有什么办法解决这个问题？

就是组件

组件可以将不同功能不同逻辑的代码拆分

反复在不同位置上进行复用。

我们先来看一下代码

# 例子

```javascript
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
    <testcom></testcom>
    <testcom></testcom>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
    data() {
      return {
      }
    },
    methods:{
    }
}
const app = Vue.createApp(Counter);
app.component('testcom', {
template: `<span>testcom</span>`
})
app.mount("#app");
```

使用方法也很简单

```javascript
const app = Vue.createApp(Counter);
app.component('testcom', {
template: `<span>testcom</span>`
})
```

我们在Vue.createApp创建了一个app对象

然后使用app.component创建一个组件

第一个参数为组件名，第二个参数是一个对象，有一个template属性，template填写我们的模板

然后在我们的页面上像使用HTML标签一样使用组件。

注意一个问题，这里的组件通常不建议使用封闭式，如<标签名 />

经过测试，我们可以看到，这里显示了两次


# 传入数据

```javascript
app.component('testcom', {
   props: ['spanname'],
template: `<span>{{spanname}}</span>`
})
```

在第二个对象中我们可以创建一个props属性，内是一个数组，我们可以设置传入的属性名。

我们这里写了spanname

然后在模板像存在data数据一样，使用了{{}}显示了数据，在method中我们可以直接使用this.spanname

但是注意，这里不能修改数据，如果修改数据以后我们再说。

这里的组件我们也可以循环绘制，让我们用v-for试一下。

我们声明了一个data的numlist为10

然后开始循环

```javascript
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
    <testcom
    v-for='(item,index) in numlist'
    :key='index'
    :spanname='"---"+index+"---"'>
    </testcom>
    </div>`
```

首先v-for进行循环，获取了item，获取了循环的数字，以及index

然后设置了key为index，我们这里不会排序，所以可以尽管放心。

spanname因为我们绑定了响应的数据，所以这里需要将spanname设置为:spanname，同时将内容设置为一个计算的，即'"---"+item+"---"'

将两个字符串与item拼接，最后显示，我们可以看一下效果



李恒道 发表于 2021-10-16 18:09:18

最后代码
// ==UserScript==
// @name         修改Vue3
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       You
// @match      https://bbs.tampermonkey.net.cn/forum.php
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @require      https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/vue.js
// @grant      unsafeWindow
// @grant      GM_getResourceText
// @grant      GM_addStyle
// ==/UserScript==
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
    <testcom
    v-for='(item,index) in numlist'
    :key='index'
    :spanname='"---"+item+"---"'>
    </testcom>
    </div>`

var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
    data() {
      return {
            numlist:10,
      }
    },
    methods:{
    }
}
const app = Vue.createApp(Counter);
app.component('testcom', {
props: ['spanname'],
template: `<span>{{spanname}}</span>`
})
app.mount("#app");

unity韩 发表于 2022-5-11 10:44:14

vue第六篇

Sunhy 发表于 2024-3-27 16:43:05

如果我需要手动调用app内的方法，这个应该怎么实现？

Sunhy 发表于 2024-3-27 16:47:40

Sunhy 发表于 2024-3-27 16:43
如果我需要手动调用app内的方法，这个应该怎么实现？

我尝试使用：
app && app.showVersion && app.showVersion()
结果app.showVersion 就是undefined了

...
app = Vue.createApp({
    data:()=>({
      show:false,
   }),
   methods: {
      showVersion(){
             this.show = true
         }
      }
})
...

李恒道 发表于 2024-3-27 17:36:18

Sunhy 发表于 2024-3-27 16:47
我尝试使用：
app && app.showVersion && app.showVersion()
结果app.showVersion 就是undefined了


createApp 在3返回的是Vue的instance实例
moute才返回的component实例吧

Sunhy 发表于 2024-3-29 15:32:53

李恒道 发表于 2024-3-27 17:36
createApp 在3返回的是Vue的instance实例
moute才返回的component实例吧

OK明白，还有个问题，我使用Vue3+ElementPlus，Elementplus里边的图标怎么可以使用，这个还是比较百思不得其解的，之前用vue2+elementUI的时候图标就是个麻烦问题，ElementPlus似乎比ui还有点麻烦

李恒道 发表于 2024-3-29 17:45:09

> (forum.php?mod=redirect&goto=findpost&pid=79730&ptid=1136)
> > OK明白，还有个问题，我使用Vue3+ElementPlus，Elementplus里边的图标怎么可以使用，这个还是比较百思不 ...

https://element-plus.org/zh-CN/component/icon.html
如果nodejs开发直接安装就可以了
如果是浏览器就引入CDN链接
`<script src="//unpkg.com/@element-plus/icons-vue"></script>`

Sunhy 发表于 2024-4-1 09:27:03

李恒道 发表于 2024-3-29 17:45
> (forum.php?mod=redirect&goto=findpost&pid=79730&ptid=1136)
> > O ...

引入CDN之后怎么注册图标呢，尝试了好多方法~~

Sunhy 发表于 2024-4-1 10:27:06

Sunhy 发表于 2024-4-1 09:27
引入CDN之后怎么注册图标呢，尝试了好多方法~~

或者说怎么使用，尝试了好几种注册组件的方式，都不得行{:4_115:}

查看完整版本: [油猴脚本开发指南]vue组件