H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】手把手教你使用 Vue3 中的 Composition API 来封装一个商品列表组件

<section id=”nice” data-tool=”mdnice编辑器” data-website=”https://www.mdnice.com” style=”padding: 0 10px; line-height: 1.6; word-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, ‘PingFang SC’, Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif; font-size: 15px; letter-spacing: 0.05em; color: #595959;”><p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>本文我们将使用 Composition API 来封装一个商品列表组件,功能分为两块逻辑:列表查询和按商品名称过滤,涉及到新的 APIsetup 中的 refonMountedwatchcomputed,看完后你将掌握 Composition API 的基本用法。</p>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>为什么使用composition API封装组件?</span><span class=”suffix” style=”display: none;”></span></h3>
<ul data-tool=”mdnice编辑器” style=”margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc;”>
<li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”><p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>当组件越来越庞大时,组件内的代码逻辑也越来越混杂,导致后期维护困难,使用 Composition API 可以将组件内的各个业务逻辑分离开。</p>
</section></li><li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”><p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>分离开的代码逻辑点可以复用,比如获取商品列表代码逻辑片段可以在任何组件中去复用。</p>
</section></li><li><section style=”margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; margin: 10px 0;”><p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>使用 Composition API 编写的代码更易读,逻辑点清晰,更方便后面接手开发者维护。</p>
</section></li></ul>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>setup 方法是什么?</span><span class=”suffix” style=”display: none;”></span></h3>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>简而言之,setup 就是用来整合各个代码逻辑片段的容器,在这里声明所有的响应式属性、计算属性、watchers 和生命周期钩子,然后暴露出去,在其它组件中使用。</p>
<blockquote class=”multiquote-1″ data-tool=”mdnice编辑器” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
<p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;”>WARNING
由于在执行 setup 时尚未创建组件实例,因此在 setup 选项中没有 this。这意味着,除了 props 之外,你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。</p>
</blockquote>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>开始吧</span><span class=”suffix” style=”display: none;”></span></h3>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>我们先将列表查询和按名字过滤两端代码逻辑都写在 setup 中,最后再做拆分重组至新组件使用。</p>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>商品列表逻辑</span><span class=”suffix” style=”display: none;”></span></h3>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>1、ref</span><span class=”suffix” style=”display: none;”></span></h5>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>首先我们用 ref 创建一个商品列表</p>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/>
<span/>setup () {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsList = ref([])
<span/>}
<span/>
</pre>
<blockquote class=”multiquote-1″ data-tool=”mdnice编辑器” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
<p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;”>ref 对我们的值创建了一个响应式引用,类似于</p>
</blockquote>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”>data() {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> <span class="hljs-attr" style="color: #986801; line-height: 26px;">goodsList</span>: {
<span/> <span class="hljs-attr" style="color: #986801; line-height: 26px;">value</span>: []
<span/> }
<span/> }
<span/>}
<span/>
</pre>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>2、props</span><span class=”suffix” style=”display: none;”></span></h5>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>我们需要调用获取商品列表接口需要知道是哪个用户调用的,所以需要一个参数 user,从外部传入,props 接收。</p>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { fetchGoodsList } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/api/fetchGoodsList'</span>
<span/>setup (props) {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsList = ref([])
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> getGoodsList = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">async</span> () => {
<span/> goodsList.value = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">await</span> fetchGoodsList(props.user)
<span/> }
<span/>
<span/> <span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// 将商品列表和数据获取方法暴露出去</span>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsList,
<span/> fetchGoodsList
<span/> }
<span/>}
<span/>
</pre>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>3、onMounted</span><span class=”suffix” style=”display: none;”></span></h5>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>onMounted 类似于我们以往使用的生命周期钩子函数 mounted,简单来说就是 setup 中的钩子函数,我们用此函数来调用 getGoodsList 方法获取商品列表。</p>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref, onMounted } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { fetchGoodsList } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/api/fetchGoodsList'</span>
<span/>setup (props) {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsList = ref([])
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> getGoodsList = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">async</span> () => {
<span/> goodsList.value = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">await</span> fetchGoodsList(props.user)
<span/> }
<span/>
<span/> onMounted(getGoodsList)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsList,
<span/> getGoodsList
<span/> }
<span/>}
<span/>
</pre>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>4、watch</span><span class=”suffix” style=”display: none;”></span></h5>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>在使用 watch 之前我们先要了解 toRefs,该函数就是为了确保我们的侦听器能够对 user prop 所做的更改做出反应。</p>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>watch 也就是 setup 中的监听器,和以往使用的 wacth 一样</p>
<blockquote class=”multiquote-1″ data-tool=”mdnice编辑器” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
<p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;”>watch(user, (newValue, oldValue) => {})</p>
</blockquote>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref, onMounted, toRefs, watch } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { fetchGoodsList } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/api/fetchGoodsList'</span>
<span/>setup (props) {
<span/> <span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// 使用
toRefs 创建对prop的 user property 的响应式引用</span>
<span/> <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>const</span> { user } = toRefs(props)
<span/>
<span/> <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>const</span> goodsList = ref([])
<span/> <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>const</span> getGoodsList = <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>async</span> () => {
<span/> goodsList.value = <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>await</span> fetchGoodsList(user.value) <span class=”hljs-comment” style=”color: #a0a1a7; font-style: italic; line-height: 26px;”>// 注意这里的 props.user 改为了 user.value</span>
<span/> }
<span/>
<span/> onMounted(getGoodsList)
<span/>
<span/> <span class=”hljs-comment” style=”color: #a0a1a7; font-style: italic; line-height: 26px;”>// 监听 user 变化</span>
<span/> watch(user, getGoodsList)
<span/>
<span/> <span class=”hljs-keyword” style=”color: #a626a4; line-height: 26px;”>return</span> {
<span/> goodsList,
<span/> getGoodsList
<span/> }
<span/>}
<span/></pre>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>至此,获取商品列表的逻辑点写完了。</p>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>商品过滤逻辑</span><span class=”suffix” style=”display: none;”></span></h3>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>接下来就是商品列表按商品名称进行过滤了,定义名称搜索变量 goodsName,写入搜索方法 searchByGoodsName,这里我们使用到 computed 方法,和以前使用的 computed 用法也基本一致。</p>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref, onMounted, toRefs, watch } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { fetchGoodsList } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/api/fetchGoodsList'</span>
<span/>setup (props) {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> { user } = toRefs(props)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsList = ref([])
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> getGoodsList = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">async</span> () => {
<span/> goodsList.value = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">await</span> fetchGoodsList(user.value)
<span/> }
<span/>
<span/> onMounted(getGoodsList)
<span/> watch(user, getGoodsList)
<span/>
<span/> <span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// 商品过滤逻辑</span>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsName = ref(<span class="hljs-string" style="color: #50a14f; line-height: 26px;">''</span>)
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> searchByGoodsName = computed(<span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">()</span> =></span> {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> goodsList.value.filter(
<span/> <span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">goods</span> =></span> goods.name.includes(goodName.value)
<span/> )
<span/> })
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsList,
<span/> getGoodsList,
<span/> goodsName,
<span/> searchByGoodsName
<span/> }
<span/>}
<span/>
</pre>
<h3 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; font-size: 20px; margin: 1.2em 0 1em; padding: 0; font-weight: bold; color: #35b378;”><span class=”prefix” style=”display: none;”></span><span class=”content”>拆分并重组</span><span class=”suffix” style=”display: none;”></span></h3>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>现在我们要把这两个逻辑的代码分别拆分到两个文件中去维护,然后再引用重组到一个新的组件中去使用。</p>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>拆分商品列表逻辑</span><span class=”suffix” style=”display: none;”></span></h5>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// src/composables/useGoodsList.js</span>
<span/>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref, onMounted, toRefs, watch } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { fetchGoodsList } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/api/fetchGoodsList'</span>
<span/>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">default</span> <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">function</span> <span class="hljs-title" style="color: #4078f2; line-height: 26px;">useGoodsList</span>(<span class="hljs-params" style="line-height: 26px;">user</span>) </span>{
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsList = ref([])
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> getGoodsList = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">async</span> () => {
<span/> goodsList.value = <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">await</span> fetchGoodsList(user.value)
<span/> }
<span/>
<span/> onMounted(getGoodsList)
<span/> watch(user, getGoodsList)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsList,
<span/> getGoodsList
<span/> }
<span/>}
<span/>
</pre>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>拆分商品过滤逻辑</span><span class=”suffix” style=”display: none;”></span></h5>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// src/composables/useSearchByGoodsName.js</span>
<span/>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { ref, onMounted, watch, toRefs } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">default</span> <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">function</span> <span class="hljs-title" style="color: #4078f2; line-height: 26px;">useSearchByGoodsName</span>(<span class="hljs-params" style="line-height: 26px;">goodsList</span>) </span>{
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> goodsName = ref(<span class="hljs-string" style="color: #50a14f; line-height: 26px;">''</span>)
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> searchByGoodsName = computed(<span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">()</span> =></span> {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> goodsList.value.filter(
<span/> <span class="hljs-function" style="line-height: 26px;"><span class="hljs-params" style="line-height: 26px;">goods</span> =></span> goods.name.includes(goodName.value)
<span/> )
<span/> })
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsName,
<span/> searchByGoodsName
<span/> }
<span/>}
<span/>
</pre>
<h5 data-tool=”mdnice编辑器” style=”margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 16px;”><span class=”prefix” style=”display: none;”></span><span class=”content”>重组至新组件使用</span><span class=”suffix” style=”display: none;”></span></h5>
<pre class=”custom” data-tool=”mdnice编辑器” style=”margin-top: 10px; margin-bottom: 10px;”><span class="hljs-comment" style="color: #a0a1a7; font-style: italic; line-height: 26px;">// src/components/goodsListAndSearch.vue</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> useGoodsList <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/composables/useGoodsList'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> useSearchByGoodsName <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'@/composables/useSearchByGoodsName'</span>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">import</span> { toRefs } <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">from</span> <span class="hljs-string" style="color: #50a14f; line-height: 26px;">'vue'</span>
<span/>
<span/><span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">export</span> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">default</span> {
<span/> <span class="hljs-attr" style="color: #986801; line-height: 26px;">props</span>: {
<span/> <span class="hljs-attr" style="color: #986801; line-height: 26px;">user</span>: { <span class="hljs-attr" style="color: #986801; line-height: 26px;">type</span>: <span class="hljs-built_in" style="color: #c18401; line-height: 26px;">String</span> }
<span/> },
<span/> setup(props) {
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> { user } = toRefs(props)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> { goodsList, getGoodsList } = useGoodsList(user)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">const</span> { goodsName, searchByGoodsName} = useSearchByGoodsName(goodsList)
<span/>
<span/> <span class="hljs-keyword" style="color: #a626a4; line-height: 26px;">return</span> {
<span/> goodsList
<span/> getGoodsList,
<span/> goodsName,
<span/> searchByGoodsName
<span/> }
<span/> }
<span/>}
<span/>
</pre>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>至此组件一个商品列表+过滤的组件就封装完成了,我们可以在新组件 goodsListAndSearch 中任意去调用 setup 暴露出来的方法了。</p>
<p data-tool=”mdnice编辑器” style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: black; margin: 1em 4px;”>总而言之,Composition API 的核心就是将组件的逻辑功能点拆分复用。</p>
<blockquote class=”multiquote-1″ data-tool=”mdnice编辑器” style=”border: none; display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; margin: 10px 5px; border-left: 3px solid #35b378; border-right: 0px solid #35b378; color: #616161; quotes: none; background: #FBF9FD;”>
<p style=”font-size: 16px; padding-top: 8px; padding-bottom: 8px; margin: 0px; color: black; line-height: 26px;”>参考:vue3js.cn/docs/zh/guide/composition-api-introduction.html</p>
</blockquote>

本文地址:H5W3 » 【前端技术】手把手教你使用 Vue3 中的 Composition API 来封装一个商品列表组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址