Vue夯实基础

<template>
  <div>
    <custom-input v-model:title="message"></custom-input>
    <p>{{ message }}</p>
  </div>
</template>
 
<script>
import CustomInput from './CustomInput.vue'
 
export default {
  components: {
    CustomInput,
  },
  data() {
    return {
      message: '',
    }
  },
}
</script>

<!-- CustomInput.vue -->
<template>
  <input :value="title" @input="$emit('update:title', $event.target.value)" />
</template>
 
<script>
export default {
  props: ['title'],
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>当前值：{{ value }}</p>
    <button @click="updateValue">更新值</button>
  </div>
</template>
 
<script>
export default {
  props: ['value'],
  methods: {
    updateValue() {
      // 通过 $emit 派发一个自定义事件，通知父组件更新数据
      this.$emit('update:value', newValue);
    }
  }
}
</script>
 

<!-- 父组件 -->
<template>
  <div>
    <child-component :value="parentValue" @update:value="parentValue = $event" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '初始值'
    };
  }
}
</script>
 

<template>
  <div>
    <p>计数：{{ counter }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
export default {
  props: ['initialCounter'],
  data() {
    return {
      // 使用 prop 作为本地数据的初始值
      counter: this.initialCounter
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
}
</script>

<template>
  <div>
    <p>标准化大小：{{ normalizedSize }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['size'],
  computed: {
    // 使用 prop 的值定义计算属性
    normalizedSize() {
      return this.size.trim().toLowerCase();
    }
  }
}
</script>

<template>
  <div>
    <h1 @click="updateMessage">{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: '原始值',
    };
  },
  methods: {
    updateMessage() {
      this.message = '修改后的值1';
      this.message = '修改后的值2';
      this.message = '修改后的值3';
      console.log('数据已更新，但 DOM 还未更新');
      this.$nextTick(() => {
        console.log('DOM 已更新');
      });
    },
  },
};
</script>
 

data() {
  return {
    originalObject: {
      name: 'John',
      age: 30,
    },
    newObject: {
      city: 'New York',
    },
  };
},
methods: {
  mergeObjects() {
    // 使用 Object.assign() 合并对象
    this.originalObject = Object.assign({}, this.originalObject, this.newObject);
    console.log(this.originalObject);
    // 输出: { name: 'John', age: 30, city: 'New York' }
  },
},
 

data() {
  return {
    originalObject: {
      name: 'John',
      age: 30,
    },
    newObject: {
      city: 'New York',
    },
  };
},
methods: {
  mergeObjects() {
    // 使用 Vue.set() 合并对象
    Object.keys(this.newObject).forEach(key => {
      Vue.set(this.originalObject, key, this.newObject[key]);
    });
    console.log(this.originalObject);
    // 输出: { name: 'John', age: 30, city: 'New York' }
  },
},
 

data() {
  return {
    originalObject: {
      name: 'John',
      age: 30,
    },
    newObject: {
      city: 'New York',
    },
  };
},
methods: {
  mergeObjects() {
    // 使用扩展运算符合并对象
    this.originalObject = { ...this.originalObject, ...this.newObject };
    console.log(this.originalObject);
    // 输出: { name: 'John', age: 30, city: 'New York' }
  },
},

<script setup>
import { ref, onMounted } from 'vue'
 
const count = ref(0)
 
const increment = () => {
  count.value++
}
 
onMounted(() => {
  console.log('Component mounted')
})
</script>
 
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

setup() {
  import { ref } from 'vue';
  const count = ref(0);
  return { count };
}

<script setup>
const props = defineProps({
  title: String
});
const emit = defineEmits(['increment']);
</script>

export default {
  props: {
    title: String,
  },
  emits: ['increment'],
  setup(props, { emit }) {
    return { props, emit }
  },
}

<script setup>
import MyComponent from './MyComponent.vue';
</script>
 
<template>
  <MyComponent />
</template>
 

<script setup>
const props = defineProps({
  title: String,
  count: Number,
})
 
const emit = defineEmits(['increment'])
 
const handleClick = () => {
  emit('increment')
}
</script>
 
<template>
  <div>
    <h1>{{ props.title }}</h1>
    <p>{{ props.count }}</p>
    <button @click="handleClick">Increment</button>
  </div>
</template>

this.message = 'New Message'
this.$nextTick(() => {
  console.log(this.$el.textContent) // 输出: New Message
})

this.message = 'New Message'
this.$nextTick(() => {
  // 执行一些操作
})
this.$nextTick(() => {
  // 执行另一些操作
})

let callbacks = [];
let pending = false;
 
function flushCallbacks() {
  callbacks.forEach(callback => callback());
  callbacks = [];
  pending = false;
}
 
let timerFunc;
 
// 尝试使用 Promise
if (typeof Promise !== 'undefined' && Promise.resolve) {
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== 'undefined') {
  // 尝试使用 MutationObserver
  let counter = 1;
  const textNode = document.createTextNode('');
  const observer = new MutationObserver(flushCallbacks);
  observer.observe(textNode, { characterData: true });
  timerFunc = () => {
    textNode.data = counter = (counter + 1) % 2;
  };
} else if (typeof setImmediate !== 'undefined') {
  // 尝试使用 setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 兜底方案：使用 setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}
 
export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}
 

this.$router.push('home');
this.$router.push({ path: 'home' });
this.$router.push({ name: 'user', params: { userId: 123 }});
this.$router.push({ path: 'register', query: { plan: '123' }});
 

this.$router.go(-1); // 后退
this.$router.go(1);  // 前进
 

this.$router.replace('home');
this.$router.replace({ path: 'home' });
 

this.$router.push('/new-page');
this.$router.replace('/new-page');
 

router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('ms_username');
  if (!role && to.path !== '/login') {
    next('/login');
  } else if (to.meta.permission) {
    role === 'admin' ? next() : next('/403');
  } else {
    if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {
      Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', {
        confirmButtonText: '确定'
      });
    } else {
      next();
    }
  }
});
 

router.afterEach((to, from) => {
  document.title = to.meta.title || '默认标题';
});
 

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      // 自定义逻辑
      next();
    }
  }
];
 

export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (vm.$route.meta.hasOwnProperty('auth_key') && vm.$route.meta.auth_key !== '') {
        if (!vm.hasPermission(vm.$route.meta.auth_key)) {
          vm.$router.replace('/admin/noPermission');
        }
      }
    });
  }
};
 
 

export default {
  beforeRouteUpdate(to, from, next) {
    // 自定义逻辑
    next();
  }
};
 

export default {
  beforeRouteLeave(to, from, next) {
    // 自定义逻辑
    next();
  }
};
 

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from './views/Login.vue';
import Home from './views/Home.vue';
import ProtectedPage from './views/ProtectedPage.vue';
 
Vue.use(VueRouter);
 
const router = new VueRouter({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/protected',
      name: 'protected',
      component: ProtectedPage,
      beforeEnter: (to, from, next) => {
        // 路由级守卫
        if (isLoggedIn()) {
          next();
        } else {
          next('/login');
        }
      },
    },
  ],
});
 
// 全局守卫
router.beforeEach((to, from, next) => {
  if (to.name === 'login') {
    if (isLoggedIn()) {
      next('/');
    } else {
      next();
    }
  } else if (!isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});
 
function isLoggedIn() {
  // 检查用户是否登录
  return localStorage.getItem('isLoggedIn') === 'true';
}
 
export default router;
 

<template>
  <div>
    <h1>登录页面</h1>
    <button @click="login">登录</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    login() {
      // 模拟登录
      localStorage.setItem('isLoggedIn', 'true');
      this.$router.push('/');
    },
  },
};
</script>
 

<template>
  <div>
    <h1>受保护的页面</h1>
    <p>只有登录用户才能看到这个页面。</p>
    <button @click="logout">退出登录</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    logout() {
      localStorage.setItem('isLoggedIn', 'false');
      this.$router.push('/login');
    },
  },
  beforeRouteEnter(to, from, next) {
    // 组件内守卫
    if (localStorage.getItem('isLoggedIn') === 'true') {
      next();
    } else {
      next('/login');
    }
  },
};
</script>
 

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

const store = new Vuex.Store({
  getters: {
    doubleCount: state => state.count * 2
  }
});
 

const store = new Vuex.Store({
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});
 

const store = new Vuex.Store({
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
 

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};
 
const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
});
 
// 访问模块状态：store.state.a.count
 

import { mapState } from 'vuex';
 
export default {
  computed: {
    // 使用 mapState 映射 store 中的 state
    ...mapState({
      count: state => state.count,
      message: state => state.message,
    }),
  },
};
 

import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState({
      count: state => state.count,
      message: state => state.message,
    }),
    // 其他计算属性
    doubleCount() {
      return this.count * 2;
    },
  },
};
 

import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState(['count', 'message', 'user']),
  },
};
 

import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState('moduleA', {
      count: state => state.count,
      message: state => state.message,
    }),
  },
};
 

Vue.filter('testfilter', function (value, text) {
  return value + text;
});
 

 
<template>
  <div>{{ test | testfilter('Hello') }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      test: 'Vue'
    };
  }
};
</script>
 

export default {
  data() {
    return {
      test: 'Vue'
    };
  },
  filters: {
    changemsg(val, text) {
      return val + text;
    }
  }
};
 

<template>
  <div>{{ test | changemsg('Hello') }}</div>
</template>
 

<template>
  <div>
    <h3 :title="test | changemsg(1234)">{{ test | changemsg(4567) }}</h3>
    <h2>{{ name | filter1 | filter2 | filter3 }}</h2>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      test: 'Vue',
      name: 'John'
    };
  },
  filters: {
    changemsg(val, text) {
      return val + text;
    }
  }
};
</script>
 

// 过滤器文件（filters.js）
const filter1 = function (val) {
  return val + '--1';
};
 
const filter2 = function (val) {
  return val + '--2';
};
 
const filter3 = function (val) {
  return val + '--3';
};
 
export default {
  filter1,
  filter2,
  filter3
};
 

// 在 main.js 中导入并注册
 
import Vue from 'vue';
import App from './App.vue';
import filters from './filters/filters.js';
 
// 注册全局过滤器
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});
 
Vue.config.productionTip = false;
 
new Vue({
  render: h => h(App)
}).$mount('#app');
 

<div v-pre>
  {{ message }} <!-- 这里的 {{ message }} 不会被 Vue 解析 -->
  <span v-if="isVisible">Hello</span> <!-- 这里的 v-if 也不会被 Vue 处理 -->
</div>
 
 

 
{{ message }}
<span v-if="isVisible">Hello</span>

<div v-cloak>
  {{ message }}
</div>
 

[v-cloak] {
  display: none;
}
 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue v-cloak 示例</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app" v-cloak>
    <h1>{{ message }}</h1>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!'
        };
      }
    });
 
    app.mount('#app');
  </script>
</body>
</html>
 
 

<template>
  <div>
    <ul>
      <!-- 使用 v-for 渲染动态列表 -->
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="addItem">Add Item</button>
    <button @click="removeItem">Remove Item</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
  computed: {
    filteredItems() {
      // 返回过滤后的列表
      return this.items.filter(item => item.id % 2 === 0);
    },
  },
  methods: {
    addItem() {
      const newItem = { id: this.items.length + 1, name: `Item ${this.items.length + 1}` };
      this.items.push(newItem);
    },
    removeItem() {
      if (this.items.length > 0) {
        this.items.pop();
      }
    },
  },
};
</script>
 

<template>
  <transition name="fade">
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<template>
  <transition
    enter-class="enter-class"
    enter-active-class="enter-active-class"
    enter-to-class="enter-to-class"
    leave-class="leave-class"
    leave-active-class="leave-active-class"
    leave-to-class="leave-to-class"
  >
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>

<template>
  <transition name="fade" type="animation">
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>

<template>
  <transition name="fade" :duration="1000">
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>
 
<template>
  <transition name="fade" :duration="{ enter: 1000, leave: 300 }">
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>
 

<template>
  <transition
    name="fade"
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    @enter-cancelled="enterCancelled"
    @before-leave="beforeLeave"
    @leave="leave"
    @after-leave="afterLeave"
    @leave-cancelled="leaveCancelled"
  >
    <div v-if="show">需要动画的内容</div>
  </transition>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  },
  methods: {
    beforeEnter(el) {
      console.log('beforeEnter', el);
    },
    enter(el, done) {
      console.log('enter', el);
      done(); // 手动触发动画完成
    },
    afterEnter(el) {
      console.log('afterEnter', el);
    },
    enterCancelled(el) {
      console.log('enterCancelled', el);
    },
    beforeLeave(el) {
      console.log('beforeLeave', el);
    },
    leave(el, done) {
      console.log('leave', el);
      done(); // 手动触发动画完成
    },
    afterLeave(el) {
      console.log('afterLeave', el);
    },
    leaveCancelled(el) {
      console.log('leaveCancelled', el);
    }
  }
};
</script>

<template>
  <div>
    <!-- 使用 keep-alive 缓存路由组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不需要缓存的路由组件 -->
    <router-view v-else />
  </div>
</template>
 

class LRUCache {
    constructor(capacity) {
        this.capacity = capacity; // 缓存的最大容量
        this.map = new Map(); // 哈希表，用于存储键值对，支持 O(1) 时间复杂度的查找
        this.keys = new Set(); // 存储 key 的访问顺序，利用 Set 的特性保持插入顺序
    }
 
    // 获取缓存中的值
    get(key) {
        if (!this.map.has(key)) {
            return -1; // 如果 key 不存在，则返回 -1
        }
        // 更新访问顺序，将当前 key 变为最近使用的
        this.keys.delete(key); // 从 Set 中删除当前 key
        this.keys.add(key); // 将当前 key 添加到 Set 的末尾（表示最近使用）
        return this.map.get(key); // 返回对应的值
    }
 
    // 向缓存中插入值
    put(key, value) {
        // 如果 key 已存在，更新值并调整访问顺序
        if (this.map.has(key)) {
            this.map.set(key, value); // 更新值
            this.keys.delete(key); // 从 Set 中删除当前 key
            this.keys.add(key); // 将当前 key 添加到 Set 的末尾（表示最近使用）
            return;
        }
 
        // 如果缓存已满，移除最近最少使用的元素（Set 中的第一个元素）
        if (this.map.size >= this.capacity) {
            const leastUsedKey = this.keys.values().next().value; // 获取 Set 中的第一个元素
            this.keys.delete(leastUsedKey); // 从 Set 中删除
            this.map.delete(leastUsedKey); // 从 Map 中删除
        }
 
        // 插入新元素并更新访问顺序
        this.map.set(key, value); // 将新元素添加到 Map 中
        this.keys.add(key); // 将新元素添加到 Set 的末尾（表示最近使用）
    }
}
 
// 测试
const lru = new LRUCache(2);
lru.put(1, 1); // 缓存: {1=1}
lru.put(2, 2); // 缓存: {1=1, 2=2}
console.log(lru.get(1)); // 返回 1, 缓存顺序更新: {2=2, 1=1}
lru.put(3, 3); // 缓存容量已满，移除最近最少使用的 2, 缓存: {1=1, 3=3}
console.log(lru.get(2)); // 返回 -1（缓存中不存在）
lru.put(4, 4); // 缓存容量已满，移除最近最少使用的 1, 缓存: {3=3, 4=4}
console.log(lru.get(1)); // 返回 -1（缓存中不存在）
console.log(lru.get(3)); // 返回 3
console.log(lru.get(4)); // 返回 4
 

class Node {
    constructor(key, value) {
        this.key = key; // 节点的键
        this.value = value; // 节点的值
        this.prev = null; // 前驱节点
        this.next = null; // 后继节点
    }
}
 
class LRUCache {
    constructor(capacity) {
        this.capacity = capacity; // 缓存的最大容量
        this.map = new Map(); // 哈希表，用于快速查找节点
        this.head = new Node(0, 0); // 头节点，表示最近使用的节点
        this.tail = new Node(0, 0); // 尾节点，表示最久未使用的节点
        this.head.next = this.tail; // 初始化双向链表
        this.tail.prev = this.head;
    }
 
    // 获取缓存中的值
    get(key) {
        if (!this.map.has(key)) {
            return -1; // 如果 key 不存在，则返回 -1
        }
        const node = this.map.get(key); // 从哈希表中获取节点
        this.remove(node); // 将节点从链表中移除
        this.add(node); // 将节点添加到链表头部（表示最近使用）
        return node.value; // 返回对应的值
    }
 
    // 向缓存中插入值
    put(key, value) {
        if (this.map.has(key)) {
            const node = this.map.get(key); // 获取现有节点
            node.value = value; // 更新值
            this.remove(node); // 将节点从链表中移除
            this.add(node); // 将节点添加到链表头部（表示最近使用）
        } else {
            // 如果缓存已满，移除最近最少使用的节点（尾部节点的前一个节点）
            if (this.map.size === this.capacity) {
                this.remove(this.tail.prev); // 移除尾部节点的前一个节点
            }
            const node = new Node(key, value); // 创建新节点
            this.add(node); // 将新节点添加到链表头部
        }
    }
 
    // 将节点添加到链表头部
    add(node) {
        node.prev = this.head; // 设置新节点的前驱为头节点
        node.next = this.head.next; // 设置新节点的后继为头节点的后继
        this.head.next.prev = node; // 更新头节点后继的前驱为新节点
        this.head.next = node; // 更新头节点的后继为新节点
        this.map.set(node.key, node); // 将新节点添加到哈希表中
    }
 
    // 从链表中移除节点
    remove(node) {
        node.prev.next = node.next; // 更新节点前驱的后继为节点的后继
        node.next.prev = node.prev; // 更新节点后继的前驱为节点的前驱
        this.map.delete(node.key); // 从哈希表中删除节点
    }
}
 
// 测试
const lru = new LRUCache(2);
lru.put(1, 1); // 缓存: {1=1}
lru.put(2, 2); // 缓存: {1=1, 2=2}
console.log(lru.get(1)); // 返回 1, 缓存顺序更新: {2=2, 1=1}
lru.put(3, 3); // 缓存容量已满，移除最近最少使用的 2, 缓存: {1=1, 3=3}
console.log(lru.get(2)); // 返回 -1（缓存中不存在）
lru.put(4, 4); // 缓存容量已满，移除最近最少使用的 1, 缓存: {3=3, 4=4}
console.log(lru.get(1)); // 返回 -1（缓存中不存在）
console.log(lru.get(3)); // 返回 3
console.log(lru.get(4)); // 返回 4
 

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :message="parentMessage" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue'
 
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    }
  },
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  props: ['message'],
}
</script>

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
 
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from Child')
    },
  },
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message-sent="handleMessage" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue'
 
export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message) // 输出: Hello from Child
    },
  },
}
</script>

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- ComponentA.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
 
<script>
import { EventBus } from './event-bus.js'
 
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', 'Hello from Component A')
    },
  },
}
</script>

<!-- ComponentB.vue -->
<template>
  <div>{{ message }}</div>
</template>
 
<script>
import { EventBus } from './event-bus.js'
 
export default {
  data() {
    return {
      message: '',
    }
  },
  created() {
    EventBus.$on('message-sent', (message) => {
      this.message = message
    })
  },
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent :custom-attr="parentMessage" @custom-event="handleEvent" />
</template>
 
<script>
import ChildComponent from './ChildComponent.vue'
 
export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    }
  },
  methods: {
    handleEvent(message) {
      console.log(message) // 输出: Hello from Child
    },
  },
}
</script>

<!-- ChildComponent.vue -->
<template>
  <GrandChildComponent v-bind="$attrs" v-on="$listeners" />
</template>
 
<script>
import GrandChildComponent from './GrandChildComponent.vue'
 
export default {
  components: { GrandChildComponent },
}
</script>

<!-- GrandChildComponent.vue -->
<template>
  <div>{{ customAttr }}</div>
  <button @click="sendEvent">Send Event</button>
</template>
 
<script>
export default {
  props: ['customAttr'],
  methods: {
    sendEvent() {
      this.$emit('custom-event', 'Hello from GrandChild')
    },
  },
}
</script>

// 祖先组件
export default {
  provide() {
    return {
      theme: this.theme,
      user: this.user,
    };
  },
  data() {
    return {
      theme: 'dark',
      user: { name: 'John Doe', age: 30 },
    };
  },
};
 
// 后代组件
export default {
  inject: ['theme', 'user'],
  created() {
    console.log(this.theme); // 'dark'
    console.log(this.user); // { name: 'John Doe', age: 30 }
  },
};
 

// 父组件
<template>
  <child-component :theme="theme" :user="user"></child-component>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      theme: 'dark',
      user: { name: 'John Doe', age: 30 },
    };
  },
};
</script>
 
// 子组件
export default {
  props: ['theme', 'user'],
  created() {
    console.log(this.theme); // 'dark'
    console.log(this.user); // { name: 'John Doe', age: 30 }
  },
};

<template>
  <!-- 1. 搭建组件的模板 -->
  <div class="my-component">
    <h2>{{ title }}</h2>
    <p>{{ description }}</p>
    <button @click="handleClick" class="btn">点击我</button>
    <slot name="content"></slot>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent',
  // 2. 定义组件的逻辑
  // 2.1 定义组件的数据输入（Props）
  props: {
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: '这是一个默认描述'
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      internalState: false
    };
  },
  // 2.2 定义组件的数据输出（事件）
  methods: {
    handleClick() {
      this.$emit('click', '按钮被点击了');
    },
    handleUpdate(value) {
      this.$emit('update', value);
    }
  },
  // 可选：定义生命周期钩子
  mounted() {
    console.log('MyComponent mounted');
  }
};
</script>
 
<style scoped>
/* 3. 封装组件的样式 */
.my-component {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
.btn {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
.btn:hover {
  background-color: #45a049;
}
</style>

 
<template>
  <div>
    <!-- 使用插槽增强组件的灵活性 -->
    <my-component
      :title="'组件标题'"
      :description="'组件描述'"
      :is-active="true"
      @click="handleComponentClick"
    >
      <template #content>
        <p>这是父组件提供的内容</p>
      </template>
    </my-component>
  </div>
</template>
 
<script>
import MyComponent from './MyComponent.vue';
 
export default {
  components: {
    MyComponent
  },
  methods: {
    handleComponentClick(message) {
      console.log('组件点击事件：', message);
    }
  }
};
</script>
 

// store.js
// 首先，创建一个 Vuex store，用于管理组件实例的状态。
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    componentInstances: {}, // 存储组件实例
  },
  mutations: {
    setComponentInstance(state, { name, instance }) {
      state.componentInstance[name] = instance;
    },
    removeComponentInstance(state, name) {
      delete state.componentInstance[name];
    },
  },
  getters: {
    getComponentInstance: (state) => (name) => {
      return state.componentInstance[name];
    },
  },
});
 

{/* 创建一个需要作为单例的组件，并在组件的 created 钩子中检查是否已经存在实例。 */}
 
<template>
  <div>
    <h1>单例组件</h1>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>
 
<script>
import { mapState, mapMutations } from 'vuex';
 
export default {
  name: 'SingletonComponent',
  data() {
    return {
      message: '这是单例组件的初始消息',
    };
  },
  computed: {
    ...mapState({
      componentInstances: (state) => state.componentInstance,
    }),
  },
  created() {
    // 检查是否已经存在实例
    if (this.componentInstance[this.name]) {
      // 如果存在，使用已存在的实例
      Object.assign(this, this.componentInstance[this.name]);
    } else {
      // 如果不存在，将当前实例存储到 Vuex 中
      this.setComponentInstance({
        name: this.name,
        instance: this,
      });
    }
  },
  beforeDestroy() {
    // 在组件销毁时，从 Vuex 中移除实例
    this.removeComponentInstance(this.name);
  },
  methods: {
    ...mapMutations(['setComponentInstance', 'removeComponentInstance']),
    updateMessage() {
      this.message = '消息已更新';
    },
  },
};
</script>
 

{/* 在父组件中，多次使用单例组件，确保它们共享同一个实例。 */}
 
<template>
  <div>
    <h1>父组件</h1>
    <singleton-component></singleton-component>
    <singleton-component></singleton-component>
    <singleton-component></singleton-component>
  </div>
</template>
 
<script>
import SingletonComponent from './SingletonComponent.vue';
 
export default {
  components: {
    SingletonComponent,
  },
};
</script>