hcysunyang/knowledge/vue

Claude Code and agent skill by hcysunyang/knowledge

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Install

npx vskill@latest install hcysunyang/knowledge/vue

SKILL.md

Vue 奇技淫巧

使用 hook:* 事件监听子组件相应生命周期钩子的触发

一图胜千言：

[Image: untitled]

如何让所有的后代组件实例都能够访问由根组件注入的选项

比如 Vuex 注入 store 的选项，在所有后代组件中都可以通过 this.$store 访问，其实很简单：

js
Vue.mixin({
  beforeCreate() {
    this.$store = this.$options.store || (this.$parent && this.$parent.$store)
  }
})

首先对于跟组件来讲，传递给 Vue 构造函数的所有选项(包括 Vue 提供的选项和自定义选项)，都是可以通过 this.$options.xxx 访问的，所以如果根实例对象想要访问这个选项，只需要将该选项添加到根实例的某个属性上即可：

js
this.$xxx = this.$options.xxx

但是对于子组件，访问他们自身的 this.$options.xxx 是访问不到从根组件注入的选项的，但是可以通过访问之前在父组件实例上定义的属性简介访问：

js
this.$parent && this.$parent.xxx

这样，就使得根组件以及其所有后代组件，都会在他们的实例对象上添加对选项的引用，使得它们全部能够访问由根组件注入进来的选项。

Security

  • Security scanPassed, 100 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
365
Repository forks
71
7-day trend score
30

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 5 May 2026, 6 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/hcysunyang/knowledge/vue/badge)](https://verified-skill.com/skills/hcysunyang/knowledge/vue)

Something wrong with this skill or its page? Tell us.