buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: update vue.md #154 #10 1f73708838

Browse Source
This commit is contained in:
jaywcjlove
2022-11-21 06:39:36 +00:00
parent d0ed36df5f
commit abd576ce8a
5 changed files with 142 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
docs/vue.html
View File

@ -149,16 +149,16 @@
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="动态绑定多个值"><a aria-hidden="true" tabindex="-1" href="#动态绑定多个值"><span class="icon icon-link"></span></a>动态绑定多个值</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>通过不带参数的 <code>v-bind</code>，你可以将它们绑定到单个元素上</p>
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line"> import comp from "./Comp.vue"
</span><span class="code-line"> import {ref} from "vue"
</span><span class="code-line"> const a = ref("hello")
</span><span class="code-line"> const b = ref("world")
</span><span class="code-line">&#x3C;/script>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports">comp</span> <span class="token keyword module">from</span> <span class="token string">"./Comp.vue"</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>ref<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"vue"</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> a <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"hello"</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword">const</span> b <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;comp v-bind="{a, b}">&#x3C;/comp>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>comp</span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{a, b}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>comp</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>如果你是使用的 <code>setup</code> 语法糖。需要使用 <code>defineprops</code> 声名（可以直接使用<code>a</code>/<code>b</code>）</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
@ -350,47 +350,47 @@
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="响应式样式"><a aria-hidden="true" tabindex="-1" href="#响应式样式"><span class="icon icon-link"></span></a>响应式样式</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { ref } from 'vue'
</span><span class="code-line">const open = ref(false);
</span><span class="code-line">&#x3C;/script>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> open <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;button @click="open = !open">Toggle&#x3C;/button>
</span><span class="code-line"> &#x3C;div>Hello Vue!&#x3C;/div>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>open = !open<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span>Hello Vue!<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">&#x3C;style scope>
</span><span class="code-line"> div{
</span><span class="code-line"> transition: height 0.1s linear;
</span><span class="code-line"> overflow: hidden;
</span><span class="code-line"> height: v-bind(open ? '30px' : '0px');
</span><span class="code-line"> }
</span><span class="code-line">&#x3C;/style>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>style</span> <span class="token attr-name">scope</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token selector">div</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">transition</span><span class="token punctuation">:</span> height <span class="token number">0.1</span><span class="token unit">s</span> linear<span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">v-bind</span><span class="token punctuation">(</span>open ? <span class="token string">'30px'</span> <span class="token punctuation">:</span> <span class="token string">'0px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"> <span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token style"><span class="token language-css"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>style</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="响应式进阶--watch和computed"><a aria-hidden="true" tabindex="-1" href="#响应式进阶--watch和computed"><span class="icon icon-link"></span></a>响应式进阶 —— watch和computed</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="监听状态"><a aria-hidden="true" tabindex="-1" href="#监听状态"><span class="icon icon-link"></span></a>监听状态</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { ref, watch } from 'vue';
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> watch <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> count <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> isEvent <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">function</span> <span class="token function">increment</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> state<span class="token punctuation">.</span><span class="token property-access">count</span><span class="token operator">++</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> isEvent<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">=</span> count<span class="token punctuation">.</span><span class="token property-access">value</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">const count = ref(0)
</span><span class="code-line">const isEvent = ref(false)
</span><span class="code-line">
</span><span class="code-line">function increment() {
</span><span class="code-line"> state.count++
</span><span class="code-line">}
</span><span class="code-line">
</span><span class="code-line">watch(count, function() {
</span><span class="code-line"> isEvent.value = count.value % 2 === 0
</span><span class="code-line">})
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;button @click="increment">
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>increment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</span><span class="code-line"> {{ count }}
</span><span class="code-line"> &#x3C;/button>
</span><span class="code-line"> &#x3C;p>is event: {{ isEvent ? 'yes' : 'no' }}&#x3C;/p>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>is event: {{ isEvent ? 'yes' : 'no' }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="立即监听状态"><a aria-hidden="true" tabindex="-1" href="#立即监听状态"><span class="icon icon-link"></span></a>立即监听状态</h3><div class="wrap-body">
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token function">watch</span><span class="token punctuation">(</span>count<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
@ -401,109 +401,109 @@
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="计算状态"><a aria-hidden="true" tabindex="-1" href="#计算状态"><span class="icon icon-link"></span></a>计算状态</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { ref, computed } from 'vue';
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref<span class="token punctuation">,</span> computed <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// computed 的回调函数里，会根据已有并用到的状态计算出新的状态</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> capital <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token keyword control-flow">return</span> text<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">const text = ref('')
</span><span class="code-line">
</span><span class="code-line">// computed 的回调函数里，会根据已有并用到的状态计算出新的状态
</span><span class="code-line">const capital = computed(function(){
</span><span class="code-line"> return text.value.toUpperCase();
</span><span class="code-line">})
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;input v-model="text" />
</span><span class="code-line"> &#x3C;p>to capital: {{ capital }}&#x3C;/p>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>to capital: {{ capital }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="组件通信"><a aria-hidden="true" tabindex="-1" href="#组件通信"><span class="icon icon-link"></span></a>组件通信</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineprops"><a aria-hidden="true" tabindex="-1" href="#defineprops"><span class="icon icon-link"></span></a>defineProps</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { defineProps } from 'vue';
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineProps <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token comment">// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
</span><span class="code-line">defineProps({
</span><span class="code-line"> username: String
</span><span class="code-line">})
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;p>username: {{ username }}&#x3C;/p>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>p</span><span class="token punctuation">></span></span>username: {{ username }}<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>p</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>子组件定义需要的参数</p>
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">const username = 'vue'
</span><span class="code-line">&#x3C;/script>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> username <span class="token operator">=</span> <span class="token string">'vue'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;children :username="username" />
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">:username</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>父组件参入参数</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineemits"><a aria-hidden="true" tabindex="-1" href="#defineemits"><span class="icon icon-link"></span></a>defineEmits</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { defineEmits, ref } from 'vue';
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineEmits<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> emit <span class="token operator">=</span> <span class="token function">defineEmits</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'search'</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'search'</span><span class="token punctuation">,</span> keyword<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">const emit = defineEmits(['search'])
</span><span class="code-line">
</span><span class="code-line">const keyword = ref('')
</span><span class="code-line">
</span><span class="code-line">const onSearch = function() {
</span><span class="code-line"> emit('search', keyword.value)
</span><span class="code-line">}
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;input v-model="keyword" />
</span><span class="code-line"> &#x3C;button @click="onSearch">search&#x3C;/button>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>子组件定义支持 <code>emit</code> 的函数</p>
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">const onSearch = function(keyword){
</span><span class="code-line"> console.log(keyword)
</span><span class="code-line">}
</span><span class="code-line">&#x3C;/script>
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">keyword</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>keyword<span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;children @search="onSearch" />
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">@search</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>父组件绑定子组件定义的事件</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="defineexpose"><a aria-hidden="true" tabindex="-1" href="#defineexpose"><span class="icon icon-link"></span></a>defineExpose</h3><div class="wrap-body">
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { defineExpose, ref } from 'vue';
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> defineExpose<span class="token punctuation">,</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> keyword <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>keyword<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span> onSearch <span class="token punctuation">}</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">const keyword = ref('')
</span><span class="code-line">
</span><span class="code-line">const onSearch = function() {
</span><span class="code-line"> console.log(keyword.value)
</span><span class="code-line">}
</span><span class="code-line">
</span><span class="code-line">defineExpose({ onSearch })
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;input v-model="keyword" />
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keyword<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>子组件对父组件暴露方法</p>
<pre><code class="language-vue code-highlight"><span class="code-line">&#x3C;script setup>
</span><span class="code-line">import { ref } from 'vue'
<pre class="language-html"><code class="language-html code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> ref <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'vue'</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> childrenRef <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript">
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">onSearch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"> childrenRef<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">.</span><span class="token method function property-access">onSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"><span class="token punctuation">}</span>
</span></span></span><span class="code-line"><span class="token script"><span class="token language-javascript"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>script</span><span class="token punctuation">></span></span>
</span><span class="code-line">
</span><span class="code-line">const childrenRef = ref(null)
</span><span class="code-line">
</span><span class="code-line">const onSearch = function(){
</span><span class="code-line"> childrenRef.value.onSearch()
</span><span class="code-line">}
</span><span class="code-line">&#x3C;/script>
</span><span class="code-line">
</span><span class="code-line">&#x3C;template>
</span><span class="code-line"> &#x3C;children ref='childrenRef' />
</span><span class="code-line"> &#x3C;button @click="onSearch">search&#x3C;/button>
</span><span class="code-line">&#x3C;/template>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>template</span><span class="token punctuation">></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>children</span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>childrenRef<span class="token punctuation">'</span></span> <span class="token punctuation">/></span></span>
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSearch<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>search<span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>button</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>template</span><span class="token punctuation">></span></span>
</span></code></pre>
<p>父组件调用子组件的方法</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="provide--inject"><a aria-hidden="true" tabindex="-1" href="#provide--inject"><span class="icon icon-link"></span></a>Provide / Inject</h3><div class="wrap-body">