Shulou(Shulou.com)06/03 Report--

Vue3 their own packaging breadcrumb functional components of which, many novices are not very clear, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Preface

Breadcrumb navigation can record browsed pages and jump back to a page easily and quickly. This article introduces several ways to encapsulate breadcrumb components. Let's take a look at how to achieve it.

Why do you need bread crumbs?

The concept of bread crumb navigation (BreadcrumbNavigation) comes from the fairy tale Hansel and Gretel. Hansel and Gretel accidentally got lost as they walked through the forest, but they found that bread crumbs were sprinkled along the way to help them find their way home.

After reading the above introduction, I believe you have understood the usage scenario of the breadcrumb component. Yes, it's used to record which pages we clicked on, so that we can go back to a previous page.

When the page has been redirected many times, the user may already be bewildered. As programmers, we may also be able to tell which location we are currently in through the address bar parameters, and eventually the web page is to be shown to the user. If users come to use it, if there is no bread crumb navigation, there may be a resistance to the web page. Using bread crumb navigation to record each jump page can solve this problem very well.

Second, primary packaging

1. Realization idea

Prepare the page structure and style, you need to use font icons

Introduce cdn font icon resources into index.html under the public directory

Define the value that needs to be passed in as a custom attribute

Place the content written externally inside the label in the default slot

two。 Code demonstration

Create a new bread-crumbs.vue file in the src/components directory, where the common components are managed uniformly, and the file name can be customized.

The code is as follows (example):

Home {{parentName}} {{parentName}} export default {name: 'BreadCrumbs', props: {parentName: {type: String, default:''}, parentPath: {type: String, default:''}} .bread-crumbs {display: flex; padding: 25px 10px &-item {a {text-decoration: none; color: # 666; transition: all .4s; &: hover {color: # 27ba9b;} I {font-size: 12px; font-style: normal; margin-left: 5px; margin-right: 5px; line-height: 22px;}}

Create a new index.js file in the src/components directory and register the encapsulated global components

Import BreadCrumbs from'. / bread-crumbs'export default {install (app) {app.component (BreadCrumbs.name, BreadCrumbs)}}

Register as a plug-in in main.js

Import {createApp} from 'vue'import App from'. / App.vue'import router from'. / router'import store from'. / store'// imports and registers import myUI from'. / components'createApp (App) .use (store) .use (router) .use (myUI) .mount ('# app') 3. Use

Pass in the values required by the public component

The code is as follows (example):

Air conditioning export default {name: 'App', setup () {}} 4. Deficiency

Can only meet the basic needs, beyond the secondary navigation can not be used.

Third, advanced packaging

1. Realization idea

Refer to the elementUI breadcrumb assembly code

Home activity Management activity list activity details

Encapsulate each navigation as a component

two。 Code demonstration

Continue to improve the code based on the encapsulation in the previous step

The code is as follows (example):

Create a new bread-crumbs-item component in the src/component directory. The file name can be customized.

Export default {name: 'BreadCurmbsItem', props: {to: {type: [String, Object]}

Or is it registered as a global component in index.js under the src/components directory

Import BreadCrumbs from'. / bread-crumbs'import BreadCrumbsItem from'. / bread-crumbs-item'export default {install (app) {app.component (BreadCrumbs.name, BreadCrumbs) app.component (BreadCrumbsItem. Name, BreadCrumbsItem)}}

Modify the code in BreadCrumbs.vue to place each navigation item in the default slot

Export default {name: 'BreadCrumbs'}. Bread-crumbs {display: flex; padding: 25px 10px;: deep (&-item) {a {text-decoration: none; color: # 666; transition: all 0.4s; &: hover {color: # 27ba9b;}: deep (I) {font-style: normal; font-size: 12px; margin-left: 5px Margin-right: 5px; line-height: 22px;}} 3. Use

When in use, use as many BreadCrumbsItem as there are secondary navigation.

The code is as follows (example):

Home appliance air conditioning export default {name: 'App', setup () {}} 4. Deficiency

There will be an extra > indicator after the last navigation.

IV. High-level packaging

1. Train of thought

The ultimate version, using the render function to create your own stitching.

CreateElement

Render render option and h function

Specify what the component displays: new Vue ({option})

El option, which finds the container through a selector. The container content is the component content.

Template option, component content as component content

The render option, which is a function that returns the default human createElement function (h), which is used to create the structure, and then the render function returns the rendering as component content. It has a higher priority.

two。 Code demonstration

Modify the code within the BreadCurmbsItem component

Export default {name: 'BreadCurmbsItem', props: {to: {type: [String, Object]}

Modify the code in BreadCrumbs.vue

Code example (below):

Import {h} from 'vue'export default {name:' BreadCrumbs', render () {/ / usage / / 1. Template tag removal, single file component / / 2. The return value is the component content / / 3. The h function of vue2.0 is passed in, and the h function of vue3.0 is imported / / 4. H the first parameter tag name, the second parameter label attribute object, the third parameter child node / / requirement / / 1. Create bread-crumbs parent container / / 2. Get the default slot content / / 3. Remove the I tag of the bread-crumbs-item component, because the / / 4 should be organized by the render function. Traverse the item in the slot to get a dynamically created node, and the last item is unlabeled / / 5. Render dynamically created nodes in the bread-crumbs tag const items = this.$slots.default () const dymanicItems = [] items.forEach ((item, I) = > {dymanicItems.push (item) if (I)

< (items.length - 1)) { dymanicItems.push(h('i', { class: 'iconfont icon-angle-right' })) } }) return h('div', { class: 'bread-crumbs' }, dymanicItems) }}// 将scope属性去除，目的是为了样式穿透至item组件中.bread-crumbs { display: flex; padding: 25px 10px; &-item { a { text-decoration: none; color: #666; transition: all .4s; &:hover { color: #27ba9b; } } } i { font-size: 12px; margin-left: 5px; margin-right: 5px; line-height: 22px; // 样式的方式，不合理 // &:last-child { // display: none; // } }}3. 使用 这个方式封装后，让全局组件的复用性更强了，强烈推荐使用 首页 电器 空调 遥控器 export default { name: 'App', setup() { }} 可以看到这样封装后，咱们自己封装的面包屑导航已经支持多级导航了。而且最后一个导航后面的>

And the indicator sign is gone.

Fifth, use jsx optimization

The functional code in the high-order writing method can be rewritten in the way of jsx, and the code written by jsx is more concise and clear.

The formal parameter of the render function of export default {name: 'BreadCrumbs', render () {/ / vue2 is the h function / / vue3 where the h function is imported / / createElement (tag name, tag attribute Child elements of the tag) / / console.dir (this.$slots.default ()) / / get all slots of XtxBread components filled with component instances const items = this.$slots.default () const results = [] items.forEach ((item, index) = > {results.push (item) / / manually generate an I icon Add to the later if (index < items.length-1) {results.push ()}}) return {results}} of the breadcrumb item

Although the function is very small, it covers a lot of knowledge points, and the above code has been tested locally

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.