Sun Jun 11 03:32:00 UTC 2023 inscode

src/App.vue

@@ -36,6 +36,7 @@ import Left from './components/Left.vue'
 import Article from './components/Article.vue';
 
 export default {
+  
 
   components: {
     Left,

src/components/Article.vue

 <template>
     <div class="article-container">
-      <h3>Article 组件</h3>
+      <h3 v-color>Article 组件</h3>
       <!-- 文章的标题 -->
       <div class="header-box">
         <slot name="title"></slot>
@@ -21,6 +21,15 @@
   
   <script>
   export default {
+    directives:{
+      color:{
+        bind(el){
+          console.log('触发了自定义指令 v-color 的 color 函数');
+          el.style.color='red';
+        }
+      }
+  },
+
     // 首字母要大写
     name: 'Article',
     data(){