{"id":167,"date":"2022-03-04T08:17:46","date_gmt":"2022-03-04T00:17:46","guid":{"rendered":"http:\/\/www.hgostand.com\/?p=167"},"modified":"2022-03-23T15:28:43","modified_gmt":"2022-03-23T07:28:43","slug":"vue3-10-%e7%a7%8d%e7%bb%84%e4%bb%b6%e9%80%9a%e8%ae%af%e6%96%b9%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/wite.oxoooo.com\/?p=167","title":{"rendered":"Vue3\u5341\u79cd\u7ec4\u4ef6\u901a\u8baf\u65b9\u5f0f"},"content":{"rendered":"\n

\u4f17\u6240\u5468\u77e5\uff0cVue.js<\/code> \u4e2d\u4e00\u4e2a\u5f88\u91cd\u8981\u7684\u77e5\u8bc6\u70b9\u662f\u7ec4\u4ef6\u901a\u4fe1\uff0c\u4e0d\u7ba1\u662f\u4e1a\u52a1\u7c7b\u7684\u5f00\u53d1\u8fd8\u662f\u7ec4\u4ef6\u5e93\u5f00\u53d1\uff0c\u90fd\u6709\u5404\u81ea\u7684\u901a\u8baf\u65b9\u6cd5\u3002<\/p>\n\n\n\n

\u672c\u6587\u9002\u5408\uff1a<\/p>\n\n\n\n

  1. \u6709 Vue 3<\/code> \u57fa\u7840\u7684\u8bfb\u8005\u3002<\/li>
  2. \u6253\u7b97\u5f00\u53d1\u7ec4\u4ef6\u5e93\u7684\u8bfb\u8005\u3002<\/li><\/ol>\n\n\n\n

    <br><\/p>\n\n\n\n

    \u672c\u6587\u4f1a\u6d89\u53ca\u7684\u77e5\u8bc6\u70b9\uff1a<\/p>\n\n\n\n

    1. Props<\/li>
    2. emits<\/li>
    3. expose \/ ref<\/li>
    4. Non-Props<\/li>
    5. v-model<\/li>
    6. \u63d2\u69fd slot<\/li>
    7. provide \/ inject<\/li>
    8. \u603b\u7ebf bus<\/li>
    9. getCurrentInstance<\/li>
    10. Vuex<\/li>
    11. Pinia<\/li>
    12. mitt.js<\/li><\/ol>\n\n\n\n

      \u6211\u4f1a\u5c06\u4e0a\u9762\u7f57\u5217\u7684\u77e5\u8bc6\u70b9\u90fd\u5199\u4e00\u4e2a\u7b80\u5355\u7684 demo\u3002\u672c\u6587\u7684\u76ee\u7684\u662f\u8ba9\u5927\u5bb6\u77e5\u9053\u6709\u8fd9\u4e9b\u65b9\u6cd5\u53ef\u4ee5\u7528\uff0c\u6240\u4ee5\u5e76\u4e0d\u4f1a\u6df1\u6316\u6bcf\u4e2a\u77e5\u8bc6\u70b9\u3002<\/p>\n\n\n\n

      \u5efa\u8bae\u8bfb\u8005\u8ddf\u7740\u672c\u6587\u6572\u4e00\u904d\u4ee3\u7801\uff0c\u7136\u540e\u6839\u636e\u672c\u6587\u7ed9\u51fa\u7684\u94fe\u63a5\u53bb\u6df1\u6316\u5404\u4e2a\u77e5\u8bc6\u70b9\u3002<\/p>\n\n\n\n

      \u6536\u85cf(\u5b66\u5230)\u662f\u81ea\u5df1\u7684\uff01<\/strong><\/p>\n\n\n\n

      Props<\/h2>\n\n\n\n

      \u7236\u7ec4\u4ef6\u4f20\u503c\u7ed9\u5b50\u7ec4\u4ef6\uff08\u7b80\u79f0\uff1a\u7236\u4f20\u5b50\uff09<\/p>\n\n\n\n

      Props \u6587\u6863<\/a><\/p>\n\n\n\n

      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n

      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <!-- \u4f7f\u7528\u5b50\u7ec4\u4ef6 --><\/code>  <Child :msg=\"message\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import Child from '.\/components\/Child.vue' \/\/ \u5f15\u5165\u5b50\u7ec4\u4ef6<\/code>
      <\/code>let message = '\u96f7\u7334'<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    {{ msg }}<\/code>  <\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>
      <\/code>const props = defineProps({<\/code>  msg: {<\/code>    type: String,<\/code>    default: ''<\/code>  }<\/code>})<\/code>
      <\/code>console.log(props.msg) \/\/ \u5728 js \u91cc\u9700\u8981\u4f7f\u7528 props.xxx \u7684\u65b9\u5f0f\u4f7f\u7528\u3002\u5728 html \u4e2d\u4f7f\u7528\u4e0d\u9700\u8981 props<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5728 <script setup><\/code> \u4e2d\u5fc5\u987b\u4f7f\u7528 defineProps<\/code> API \u6765\u58f0\u660e props<\/code>\uff0c\u5b83\u5177\u5907\u5b8c\u6574\u7684\u63a8\u65ad\u5e76\u4e14\u5728 <script setup><\/code> \u4e2d\u662f\u76f4\u63a5\u53ef\u7528\u7684\u3002<\/p>\n\n\n\n
      \u5728 <script setup><\/code> \u4e2d\uff0cdefineProps<\/code> \u4e0d\u9700\u8981\u53e6\u5916\u5f15\u5165\u3002<\/p>\n\n\n\n
      props<\/code> \u5176\u5b9e\u8fd8\u80fd\u505a\u5f88\u591a\u4e8b\u60c5\uff0c\u6bd4\u5982\uff1a\u8bbe\u7f6e\u9ed8\u8ba4\u503c default<\/code> \uff0c\u7c7b\u578b\u9a8c\u8bc1 type<\/code> \uff0c\u8981\u6c42\u5fc5\u4f20 required<\/code> \uff0c\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u51fd\u6570 validator<\/code> \u7b49\u7b49\u3002<\/p>\n\n\n\n
      \u5927\u5bb6\u53ef\u4ee5\u53bb\u5b98\u7f51\u770b\u770b\uff0c\u8fd9\u662f\u5fc5\u987b\u638c\u63e1<\/strong>\u7684\u77e5\u8bc6\u70b9\uff01<\/p>\n\n\n\n
      props \u6587\u6863<\/a><\/p>\n\n\n\n
      emits<\/h2>\n\n\n\n
      \u5b50\u7ec4\u4ef6\u901a\u77e5\u7236\u7ec4\u4ef6\u89e6\u53d1\u4e00\u4e2a\u4e8b\u4ef6\uff0c\u5e76\u4e14\u53ef\u4ee5\u4f20\u503c\u7ed9\u7236\u7ec4\u4ef6\u3002\uff08\u7b80\u79f0\uff1a\u5b50\u4f20\u7236\uff09<\/p>\n\n\n\n
      emits \u6587\u6863<\/a><\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <div>\u7236\u7ec4\u4ef6\uff1a{{ message }}<\/div><\/code>  <!-- \u81ea\u5b9a\u4e49 changeMsg \u4e8b\u4ef6 --><\/code>  <Child @changeMsg=\"changeMessage\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>let message = ref('\u96f7\u7334')<\/code>
      <\/code>\/\/ \u66f4\u6539 message \u7684\u503c\uff0cdata\u662f\u4ece\u5b50\u7ec4\u4ef6\u4f20\u8fc7\u6765\u7684<\/code>function changeMessage(data) {<\/code>  message.value = data<\/code>}<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    \u5b50\u7ec4\u4ef6\uff1a<button @click=\"handleClick\">\u5b50\u7ec4\u4ef6\u7684\u6309\u94ae<\/button><\/code>  <\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>
      <\/code>\/\/ \u6ce8\u518c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u540d\uff0c\u5411\u4e0a\u4f20\u9012\u65f6\u544a\u8bc9\u7236\u7ec4\u4ef6\u8981\u89e6\u53d1\u7684\u4e8b\u4ef6\u3002<\/code>const emit = defineEmits(['changeMsg'])<\/code>
      <\/code>function handleClick() {<\/code>  \/\/ \u53c2\u65701\uff1a\u4e8b\u4ef6\u540d<\/code>  \/\/ \u53c2\u65702\uff1a\u4f20\u7ed9\u7236\u7ec4\u4ef6\u7684\u503c<\/code>  emit('changeMsg', '\u9ca8\u9c7c\u8fa3\u6912')<\/code>}<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5728 <script setup><\/code> \u4e2d\uff0cdefineEmits<\/code> \u4e0d\u9700\u8981\u53e6\u5916\u5f15\u5165\u3002<\/p>\n\n\n\n
      expose \/ ref<\/h2>\n\n\n\n
      \u5b50\u7ec4\u4ef6\u53ef\u4ee5\u901a\u8fc7 expose<\/code> \u66b4\u9732\u81ea\u8eab\u7684\u65b9\u6cd5\u548c\u6570\u636e\u3002<\/p>\n\n\n\n
      \u7236\u7ec4\u4ef6\u901a\u8fc7 ref<\/code> \u83b7\u53d6\u5230\u5b50\u7ec4\u4ef6\u5e76\u8c03\u7528\u5176\u65b9\u6cd5\u6216\u8bbf\u95ee\u6570\u636e\u3002<\/p>\n\n\n\n
      expose \u6587\u6863<\/a><\/p>\n\n\n\n
      \u7528\u4f8b\u5b50\u8bf4\u8bdd<\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <div>\u7236\u7ec4\u4ef6\uff1a\u62ff\u5230\u5b50\u7ec4\u4ef6\u7684message\u6570\u636e\uff1a{{ msg }}<\/div><\/code>  <button @click=\"callChildFn\">\u8c03\u7528\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5<\/button><\/code>
      <\/code>  <hr><\/code>
      <\/code>  <Child ref=\"com\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref, onMounted } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const com = ref(null) \/\/ \u901a\u8fc7 \u6a21\u677fref \u7ed1\u5b9a\u5b50\u7ec4\u4ef6<\/code>
      <\/code>const msg = ref('')<\/code>
      <\/code>onMounted(() => {<\/code>  \/\/ \u5728\u52a0\u8f7d\u5b8c\u6210\u540e\uff0c\u5c06\u5b50\u7ec4\u4ef6\u7684 message \u8d4b\u503c\u7ed9 msg<\/code>  msg.value = com.value.message<\/code>})<\/code>
      <\/code>function callChildFn() {<\/code>  \/\/ \u8c03\u7528\u5b50\u7ec4\u4ef6\u7684 changeMessage \u65b9\u6cd5<\/code>  com.value.changeMessage('\u849c\u5934\u738b\u516b')<\/code>
      <\/code>  \/\/ \u91cd\u65b0\u5c06 \u5b50\u7ec4\u4ef6\u7684message \u8d4b\u503c\u7ed9 msg<\/code>  msg.value = com.value.message<\/code>}<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div>\u5b50\u7ec4\u4ef6\uff1a{{ message }}<\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>
      <\/code>const message = ref('\u87d1\u8782\u6076\u9738')<\/code>
      <\/code>function changeMessage(data) {<\/code>  message.value = data<\/code>}<\/code>
      <\/code>\u4f7f\u7528 defineExpose \u5411\u5916\u66b4\u9732\u6307\u5b9a\u7684\u6570\u636e\u548c\u65b9\u6cd5<\/code>defineExpose({<\/code>  message,<\/code>  changeMessage<\/code>})<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5728 <script setup><\/code> \u4e2d\uff0cdefineExpose<\/code> \u4e0d\u9700\u8981\u53e6\u5916\u5f15\u5165\u3002<\/p>\n\n\n\n
      expose \u6587\u6863<\/a><\/p>\n\n\n\n
      defineExpose \u6587\u6863<\/a><\/p>\n\n\n\n
      Non-Props<\/h2>\n\n\n\n
      \u6240\u8c13\u7684 Non-Props<\/code> \u5c31\u662f \u975e Prop \u7684 Attribute<\/a>\u3002<\/p>\n\n\n\n
      \u610f\u601d\u662f\u5728\u5b50\u7ec4\u4ef6\u4e2d\uff0c\u6ca1\u4f7f\u7528 prop<\/code> \u6216 emits<\/code> \u5b9a\u4e49\u7684 attribute<\/code>\uff0c\u53ef\u4ee5\u901a\u8fc7 $attrs<\/code> \u6765\u8bbf\u95ee\u3002<\/p>\n\n\n\n
      \u5e38\u89c1\u7684\u6709 class<\/code> \u3001style<\/code> \u548c id<\/code>\u3002<\/p>\n\n\n\n
      \u975e Prop \u7684 Attribute \u6587\u6863<\/a><\/p>\n\n\n\n
      \u8fd8\u662f\u4e3e\u4e2a\u4f8b\u5b50\u4f1a\u76f4\u89c2\u70b9<\/p>\n\n\n\n
      \u5355\u4e2a\u6839\u5143\u7d20\u7684\u60c5\u51b5<\/h3>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child msg=\"\u96f7\u7334 \u4e16\u754c\uff01\" name=\"\u9ca8\u9c7c\u8fa3\u6912\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div>\u5b50\u7ec4\u4ef6\uff1a\u6253\u5f00\u63a7\u5236\u53f0\u770b\u770b<\/div><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u6253\u5f00\u63a7\u5236\u53f0\u53ef\u4ee5\u770b\u5230\uff0c\u5c5e\u6027\u88ab\u6302\u5230 HTML<\/code> \u5143\u7d20\u4e0a\u4e86\u3002<\/p>\n\n\n\n
      \u591a\u4e2a\u5143\u7d20\u7684\u60c5\u51b5<\/h3>\n\n\n\n
      \u4f46\u5728 Vue3<\/code> \u4e2d\uff0c\u7ec4\u4ef6\u5df2\u7ecf\u6ca1\u89c4\u5b9a\u53ea\u80fd\u6709\u4e00\u4e2a\u6839\u5143\u7d20\u4e86\u3002\u5982\u679c\u5b50\u7ec4\u4ef6\u662f\u591a\u4e2a\u5143\u7d20\u65f6\uff0c\u4e0a\u9762\u7684\u4f8b\u5b50\u5c31\u4e0d\u751f\u6548\u4e86\u3002<\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div>\u5b50\u7ec4\u4ef6\uff1a\u6253\u5f00\u63a7\u5236\u53f0\u770b\u770b<\/div><\/code>  <div>\u5b50\u7ec4\u4ef6\uff1a\u6253\u5f00\u63a7\u5236\u53f0\u770b\u770b<\/div><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u6b64\u65f6\u53ef\u4ee5\u4f7f\u7528 $attrs<\/code> \u7684\u65b9\u5f0f\u8fdb\u884c\u7ed1\u5b9a\u3002<\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div :message=\"$attrs.msg\">\u53ea\u7ed1\u5b9a\u6307\u5b9a\u503c<\/div><\/code>  <div v-bind=\"$attrs\">\u5168\u7ed1\u5b9a<\/div><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      v-model<\/h2>\n\n\n\n
      v-model<\/code> \u662f Vue<\/code> \u7684\u4e00\u4e2a\u8bed\u6cd5\u7cd6\u3002\u5728 Vue3<\/code> \u4e2d\u7684\u73a9\u6cd5\u5c31\u66f4\u591a(\u6655)\u4e86\u3002<\/p>\n\n\n\n
      \u5355\u503c\u7684\u60c5\u51b5<\/h3>\n\n\n\n
      \u7ec4\u4ef6\u4e0a\u7684 v-model<\/code> \u4f7f\u7528 modelValue<\/code> \u4f5c\u4e3a prop \u548c update:modelValue<\/code> \u4f5c\u4e3a\u4e8b\u4ef6\u3002<\/p>\n\n\n\n
      v-model \u53c2\u6570\u6587\u6863<\/a><\/p>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child v-model=\"message\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const message = ref('\u96f7\u7334')<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div @click=\"handleClick\">{{modelValue}}<\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>
      <\/code>\/\/ \u63a5\u6536<\/code>const props = defineProps([<\/code>  'modelValue' \/\/ \u63a5\u6536\u7236\u7ec4\u4ef6\u4f7f\u7528 v-model \u4f20\u8fdb\u6765\u7684\u503c\uff0c\u5fc5\u987b\u7528 modelValue \u8fd9\u4e2a\u540d\u5b57\u6765\u63a5\u6536<\/code>])<\/code>
      <\/code>const emit = defineEmits(['update:modelValue']) \/\/ \u5fc5\u987b\u7528 update:modelValue \u8fd9\u4e2a\u540d\u5b57\u6765\u901a\u77e5\u7236\u7ec4\u4ef6\u4fee\u6539\u503c<\/code>
      <\/code>function handleClick() {<\/code>  \/\/ \u53c2\u65701\uff1a\u901a\u77e5\u7236\u7ec4\u4ef6\u4fee\u6539\u503c\u7684\u65b9\u6cd5\u540d<\/code>  \/\/ \u53c2\u65702\uff1a\u8981\u4fee\u6539\u7684\u503c<\/code>  emit('update:modelValue', '\u55b7\u5c04\u6cb3\u9a6c')<\/code>}<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u4f60\u4e5f\u53ef\u4ee5\u8fd9\u6837\u5199\uff0c\u66f4\u52a0\u7b80\u5355<\/p>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div @click=\"$emit('update:modelValue', '\u55b7\u5c04\u6cb3\u9a6c')\">{{modelValue}}<\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>
      <\/code>\/\/ \u63a5\u6536<\/code>const props = defineProps([<\/code>  'modelValue' \/\/ \u63a5\u6536\u7236\u7ec4\u4ef6\u4f7f\u7528 v-model \u4f20\u8fdb\u6765\u7684\u503c\uff0c\u5fc5\u987b\u7528 modelValue \u8fd9\u4e2a\u540d\u5b57\u6765\u63a5\u6536<\/code>])<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u591a\u4e2a v-model \u7ed1\u5b9a<\/h3>\n\n\n\n
      \u591a\u4e2a v-model \u7ed1\u5b9a \u6587\u6863<\/a><\/p>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child v-model:msg1=\"message1\" v-model:msg2=\"message2\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const message1 = ref('\u96f7\u7334')<\/code>
      <\/code>const message2 = ref('\u87d1\u8782\u6076\u9738')<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><button @click=\"changeMsg1\">\u4fee\u6539msg1<\/button> {{msg1}}<\/div><\/code>
      <\/code>  <div><button @click=\"changeMsg2\">\u4fee\u6539msg2<\/button> {{msg2}}<\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>
      <\/code>\/\/ \u63a5\u6536<\/code>const props = defineProps({<\/code>  msg1: String,<\/code>  msg2: String<\/code>})<\/code>
      <\/code>const emit = defineEmits(['update:msg1', 'update:msg2'])<\/code>
      <\/code>function changeMsg1() {<\/code>  emit('update:msg1', '\u9ca8\u9c7c\u8fa3\u6912')<\/code>}<\/code>
      <\/code>function changeMsg2() {<\/code>  emit('update:msg2', '\u874e\u5b50\u83b1\u83b1')<\/code>}<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      v-model \u4fee\u9970\u7b26<\/h3>\n\n\n\n
      v-model<\/code> \u8fd8\u80fd\u901a\u8fc7 .<\/code> \u7684\u65b9\u5f0f\u4f20\u5165\u4fee\u9970\u3002<\/p>\n\n\n\n
      v-model \u4fee\u9970\u7b26 \u6587\u6863<\/a><\/p>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child v-model.uppercase=\"message\" \/><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const message = ref('hello')<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div>{{modelValue}}<\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref, onMounted } from 'vue'<\/code>
      <\/code>const props = defineProps([<\/code>  'modelValue',<\/code>  'modelModifiers'<\/code>])<\/code>
      <\/code>const emit = defineEmits(['update:modelValue'])<\/code>
      <\/code>onMounted(() => {<\/code>  \/\/ \u5224\u65ad\u6709\u6ca1\u6709 uppercase \u4fee\u9970\u7b26\uff0c\u6709\u7684\u8bdd\u5c31\u6267\u884c toUpperCase() \u65b9\u6cd5<\/code>  if (props.modelModifiers.uppercase) {<\/code>    emit('update:modelValue', props.modelValue.toUpperCase())<\/code>  }<\/code>})<\/code>
      <\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u63d2\u69fd slot<\/h2>\n\n\n\n
      \u63d2\u69fd\u53ef\u4ee5\u7406\u89e3\u4e3a\u4f20\u4e00\u6bb5 HTML<\/code> \u7247\u6bb5\u7ed9\u5b50\u7ec4\u4ef6\u3002\u5b50\u7ec4\u4ef6\u5c06 <slot><\/code> \u5143\u7d20\u4f5c\u4e3a\u627f\u8f7d\u5206\u53d1\u5185\u5bb9\u7684\u51fa\u53e3\u3002<\/p>\n\n\n\n
      \u63d2\u69fd \u6587\u6863<\/a><\/p>\n\n\n\n
      \u672c\u6587\u6253\u7b97\u8bb2\u8bb2\u65e5\u5e38\u7528\u5f97\u6bd4\u8f83\u591a\u7684 3 \u79cd\u63d2\u69fd\uff1a\u9ed8\u8ba4\u63d2\u69fd\u3001\u5177\u540d\u63d2\u69fd\u3001\u4f5c\u7528\u57df\u63d2\u69fd\u3002<\/p>\n\n\n\n
      \u9ed8\u8ba4\u63d2\u69fd<\/h3>\n\n\n\n
      \u63d2\u69fd\u7684\u57fa\u7840\u7528\u6cd5\u975e\u5e38\u7b80\u5355\uff0c\u53ea\u9700\u5728 \u5b50\u7ec4\u4ef6<\/strong> \u4e2d\u4f7f\u7528 <slot><\/code> \u6807\u7b7e\uff0c\u5c31\u4f1a\u5c06\u7236\u7ec4\u4ef6\u4f20\u8fdb\u6765\u7684 HTML<\/code> \u5185\u5bb9\u6e32\u67d3\u51fa\u6765\u3002<\/p>\n\n\n\n
      \u9ed8\u8ba4\u63d2\u69fd \u6587\u6863<\/a><\/p>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child><\/code>    <div>\u96f7\u7334\u554a<\/div><\/code>  <\/Child><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    <slot><\/slot><\/code>  <\/div><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      <br><\/p>\n\n\n\n
      \u5177\u540d\u63d2\u69fd<\/h3>\n\n\n\n
      \u5177\u540d\u63d2\u69fd<\/strong> \u5c31\u662f\u5728 \u9ed8\u8ba4\u63d2\u69fd<\/strong> \u7684\u57fa\u7840\u4e0a\u8fdb\u884c\u5206\u7c7b\uff0c\u53ef\u4ee5\u7406\u89e3\u4e3a\u5bf9\u53f7\u5165\u5ea7\u3002<\/p>\n\n\n\n
      \u5177\u540d\u63d2\u69fd \u6587\u6863<\/a><\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child><\/code>    <template v-slot:monkey><\/code>      <div>\u96f7\u7334\u554a<\/div><\/code>    <\/template><\/code>
      <\/code>    <button>\u9ca8\u9c7c\u8fa3\u6912<\/button><\/code>  <\/Child><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    <!-- \u9ed8\u8ba4\u63d2\u69fd --><\/code>    <slot><\/slot><\/code>    <!-- \u5177\u540d\u63d2\u69fd --><\/code>    <slot name=\"monkey\"><\/slot><\/code>  <\/div><\/code><\/template><\/code><\/code><\/pre>\n\n\n\n
      \u7236\u7ec4\u4ef6\u9700\u8981\u4f7f\u7528 <template><\/code> \u6807\u7b7e\uff0c\u5e76\u5728\u6807\u7b7e\u4e0a\u4f7f\u7528 v-solt: + \u540d\u79f0<\/code> \u3002<\/p>\n\n\n\n
      \u5b50\u7ec4\u4ef6\u9700\u8981\u5728 <slot><\/code> \u6807\u7b7e\u91cc\u7528 name= \u540d\u79f0<\/code> \u5bf9\u5e94\u63a5\u6536\u3002<\/p>\n\n\n\n
      \u8fd9\u5c31\u662f \u5bf9\u53f7\u5165\u5ea7<\/strong>\u3002<\/p>\n\n\n\n
      \u6700\u540e\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u63d2\u69fd\u5185\u5bb9\u7684\u6392\u7248\u987a\u5e8f\uff0c\u662f \u4ee5\u5b50\u7ec4\u4ef6\u91cc\u7684\u6392\u7248\u4e3a\u51c6<\/strong>\u3002<\/p>\n\n\n\n
      \u4e0a\u9762\u8fd9\u4e2a\u4f8b\u5b50\u5c31\u662f\u8fd9\u6837\uff0c\u4f60\u53ef\u4ee5\u4ed4\u7ec6\u89c2\u5bdf\u5b50\u7ec4\u4ef6\u4f20\u5165\u987a\u5e8f\u548c\u5b50\u7ec4\u4ef6\u7684\u6392\u7248\u987a\u5e8f\u3002<\/p>\n\n\n\n
      \u4f5c\u7528\u57df\u63d2\u69fd<\/h3>\n\n\n\n
      \u5982\u679c\u4f60\u7528\u8fc7 Element-Plus<\/code> \u8fd9\u7c7b UI \u6846\u67b6 \u7684 Table<\/code> \uff0c\u5e94\u8be5\u5c31\u80fd\u5f88\u597d\u7684\u7406\u89e3\u4ec0\u4e48\u53eb\u4f5c\u7528\u57df\u63d2\u69fd\u3002<\/p>\n\n\n\n
      \u4f5c\u7528\u57df\u63d2\u69fd \u6587\u6863<\/a><\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <!-- v-slot=\"{scope}\" \u83b7\u53d6\u5b50\u7ec4\u4ef6\u4f20\u4e0a\u6765\u7684\u6570\u636e --><\/code>  <!-- :list=\"list\" \u628alist\u4f20\u7ed9\u5b50\u7ec4\u4ef6 --><\/code>  <Child v-slot=\"{scope}\" :list=\"list\"><\/code>    <div><\/code>      <div>\u540d\u5b57\uff1a{{ scope.name }}<\/div><\/code>      <div>\u804c\u4e1a\uff1a{{ scope.occupation }}<\/div><\/code>      <hr><\/code>    <\/div><\/code>  <\/Child><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const list = ref([<\/code>  { name: '\u96f7\u7334', occupation: '\u6253\u96f7'},<\/code>  { name: '\u9ca8\u9c7c\u8fa3\u6912', occupation: '\u6e38\u6cf3'},<\/code>  { name: '\u87d1\u8782\u6076\u9738', occupation: '\u626b\u5730'},<\/code>])<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    <!-- \u7528 :scope=\"item\" \u8fd4\u56de\u6bcf\u4e00\u9879 --><\/code>    <slot v-for=\"item in list\" :scope=\"item\" \/><\/code>  <\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>const props = defineProps({<\/code>  list: {<\/code>    type: Array,<\/code>    default: () => []<\/code>  }<\/code>})<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u6211\u6ca1\u5199\u6837\u5f0f\uff0c\u6240\u4ee5\u7528 hr<\/code> \u5143\u7d20\u8ba9\u89c6\u89c9\u4e0a\u770b\u4e0a\u53bb\u6bd4\u8f83\u6e05\u6670 \u6211\u5c31\u662f\u61d2<\/s>\u3002<\/p>\n\n\n\n
      provide \/ inject<\/h2>\n\n\n\n
      \u9047\u5230\u591a\u5c42\u4f20\u503c\u65f6\uff0c\u4f7f\u7528 props<\/code> \u548c emit<\/code> \u7684\u65b9\u5f0f\u4f1a\u663e\u5f97\u6bd4\u8f83\u7b28\u62d9\u3002\u8fd9\u65f6\u5c31\u53ef\u4ee5\u7528 provide<\/code> \u548c inject<\/code> \u4e86\u3002<\/p>\n\n\n\n
      provide<\/code> \u662f\u5728\u7236\u7ec4\u4ef6\u91cc\u4f7f\u7528\u7684\uff0c\u53ef\u4ee5\u5f80\u4e0b\u4f20\u503c\u3002<\/p>\n\n\n\n
      inject<\/code> \u662f\u5728\u5b50(\u540e\u4ee3)\u7ec4\u4ef6\u91cc\u4f7f\u7528\u7684\uff0c\u53ef\u4ee5\u7f51\u4e0a\u53d6\u503c\u3002<\/p>\n\n\n\n
      \u65e0\u8bba\u7ec4\u4ef6\u5c42\u6b21\u7ed3\u6784\u6709\u591a\u6df1\uff0c\u7236\u7ec4\u4ef6\u90fd\u53ef\u4ee5\u4f5c\u4e3a\u5176\u6240\u6709\u5b50\u7ec4\u4ef6\u7684\u4f9d\u8d56\u63d0\u4f9b\u8005\u3002<\/p>\n\n\n\n
      provide \/ inject \u6587\u6863<\/a><\/p>\n\n\n\n
      \"\"\/<\/figure>\n\n\n\n
      \u7236\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Parent.vue<\/code>
      <\/code><template><\/code>  <Child><\/Child><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { ref, provide, readonly } from 'vue'<\/code>import Child from '.\/components\/Child.vue'<\/code>
      <\/code>const name = ref('\u731b\u864e\u4e0b\u5c71')<\/code>const msg = ref('\u96f7\u7334')<\/code>
      <\/code>\/\/ \u4f7f\u7528readonly\u53ef\u4ee5\u8ba9\u5b50\u7ec4\u4ef6\u65e0\u6cd5\u76f4\u63a5\u4fee\u6539\uff0c\u9700\u8981\u8c03\u7528provide\u5f80\u4e0b\u4f20\u7684\u65b9\u6cd5\u6765\u4fee\u6539<\/code>provide('name', readonly(name))<\/code>
      <\/code>provide('msg', msg)<\/code>
      <\/code>provide('changeName', (value) => {<\/code>  name.value = value<\/code>})<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      \u5b50\u7ec4\u4ef6<\/strong><\/p>\n\n\n\n
      \/\/ Child.vue<\/code>
      <\/code><template><\/code>  <div><\/code>    <div>msg: {{ msg }}<\/div><\/code>    <div>name: {{name}}<\/div><\/code>    <button @click=\"handleClick\">\u4fee\u6539<\/button><\/code>  <\/div><\/code><\/template><\/code>
      <\/code><script setup><\/code>import { inject } from 'vue'<\/code>
      <\/code>const name = inject('name', 'hello') \/\/ \u770b\u770b\u6709\u6ca1\u6709\u503c\uff0c\u6ca1\u503c\u7684\u8bdd\u5c31\u9002\u7528\u9ed8\u8ba4\u503c\uff08\u8fd9\u91cc\u9ed8\u8ba4\u503c\u662fhello\uff09<\/code>const msg = inject('msg')<\/code>const changeName = inject('changeName')<\/code>
      <\/code>function handleClick() {<\/code>  \/\/ \u8fd9\u6837\u5199\u4e0d\u5408\u9002\uff0c\u56e0\u4e3avue\u91cc\u63a8\u8350\u4f7f\u7528\u5355\u5411\u6570\u636e\u6d41\uff0c\u5f53\u7236\u7ea7\u4f7f\u7528readonly\u540e\uff0c\u8fd9\u884c\u4ee3\u7801\u662f\u4e0d\u4f1a\u751f\u6548\u7684\u3002\u6ca1\u4f7f\u7528\u4e4b\u524d\u624d\u4f1a\u751f\u6548\u3002<\/code>  \/\/ name.value = '\u96f7\u7334'<\/code>
      <\/code>  \/\/ \u6b63\u786e\u7684\u65b9\u5f0f<\/code>  changeName('\u864e\u8eaf\u4e00\u9707')<\/code>
      <\/code>  \/\/ \u56e0\u4e3a msg \u6ca1\u88ab readonly \u8fc7\uff0c\u6240\u4ee5\u53ef\u4ee5\u76f4\u63a5\u4fee\u6539\u503c<\/code>  msg.value = '\u4e16\u754c'<\/code>}<\/code><\/script><\/code><\/code><\/pre>\n\n\n\n
      provide<\/code> \u53ef\u4ee5\u914d\u5408 readonly<\/code> \u4e00\u8d77\u4f7f\u7528\uff0c\u8be6\u60c5\u53ef\u4ee5\u770b\u4e0a\u9762\u4f8b\u5b50\u548c\u6ce8\u91ca\u3002<\/p>\n\n\n\n
      provide<\/code> \u548c inject<\/code> \u5176\u5b9e\u4e3b\u8981\u662f\u7528\u5728\u6df1\u5c42\u5173\u7cfb\u4e2d\u4f20\u503c\uff0c\u4e0a\u9762\u7684\u4f8b\u5b50\u53ea\u6709\u7236\u5b50 2 \u5c42\uff0c\u53ea\u662f\u4e3a\u4e86\u4e3e\u4f8b\u8bf4\u660e \u6211\u61d2<\/s>\u3002<\/p>\n\n\n\n
      \u603b\u7ebf bus<\/h2>\n\n\n\n
      \u5728 Vue2<\/code> \u6709\u603b\u7ebf\u4f20\u503c\u7684\u65b9\u6cd5\uff0c\u6211\u4eec\u5728 Vue3<\/code> \u4e2d\u4e5f\u53ef\u4ee5\u81ea\u5df1\u6a21\u62df\u3002<\/p>\n\n\n\n
      \u8fd9\u4e2a\u65b9\u5f0f\u5176\u5b9e\u6709\u70b9\u50cf Vuex<\/code> \u6216\u8005 Pinia<\/code> \u90a3\u6837\uff0c\u5f04\u4e00\u4e2a\u72ec\u7acb\u7684\u5de5\u5177\u51fa\u6765\u4e13\u95e8\u63a7\u5236\u6570\u636e\u3002<\/p>\n\n\n\n
      \u4f46\u548c Vuex<\/code> \u6216 Pinia<\/code> \u76f8\u6bd4\uff0c\u6211\u4eec\u81ea\u5df1\u5199\u7684\u8fd9\u4e2a\u65b9\u6cd5\u5e76\u6ca1\u6709\u5f88\u597d\u7684\u6570\u636e\u8ddf\u8e2a\u4e4b\u7c7b\u7684\u7279\u6027\u3002<\/p>\n\n\n\n
      \u539f\u7406<\/strong><\/p>\n\n\n\n
      \u6211\u4eec\u521b\u5efa\u4e00\u4e2a Bus.js<\/code> \u6587\u4ef6\uff0c\u7528\u6765\u63a7\u5236\u6570\u636e\u548c\u6ce8\u518c\u4e8b\u4ef6\u7684\u3002<\/p>\n\n\n\n
      Bus.js<\/code> \u91cc\u6709\u4e00\u4e2a Bus<\/code> \u7c7b<\/p>\n\n\n\n
      \u548c props<\/code> \u4e00\u6837\uff0c\u5728 <script setup><\/code> \u4e2d\u5fc5\u987b\u4f7f\u7528 defineEmits<\/code> API \u6765\u58f0\u660e emits<\/code>\uff0c\u5b83\u5177\u5907\u5b8c\u6574\u7684\u63a8\u65ad\u5e76\u4e14\u5728 <script setup><\/code> \u4e2d\u662f\u76f4\u63a5\u53ef\u7528\u7684\u3002\u66f4\u591a\u7ec6\u8282\u8bf7\u770b \u6587\u6863<\/a>\u3002<\/p>\n\n\n\n
      \u66f4\u591a\u7ec6\u8282\u8bf7\u770b \u6587\u6863<\/a>\u3002<\/p>\n\n\n\n