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

李恒道

前文

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

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

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

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

就是组件

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

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

我们先来看一下代码

例子

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");

使用方法也很简单

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

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

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

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

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

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

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

传入数据

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

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

我们这里写了spanname

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

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

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

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

然后开始循环

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拼接，最后显示，我们可以看一下效果

李恒道

最后代码
// ==UserScript==
// @name         修改Vue3
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try 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.co ... -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韩

vue第六篇

Sunhy

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

Sunhy

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
         }
      }
})
...

李恒道

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

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

Sunhy

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

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

李恒道

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

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-3-29 17:45
[md]> [Sunhy 发表于 2024-3-29 15:32](forum.php?mod=redirect&goto=findpost&pid=79730&ptid=1136)
> > O ...

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

Sunhy

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

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