How to componentize the common header of the page in Vue (detailed tutorial)

This article mainly introduces the method of vue componentizing the common header of the page. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

This article introduces the method of vue componentizing the common header of the page and shares it with everyone. The details are as follows:

Uh... pick up the previous one again vue-cli quickly generates projects.

I previously made a multi-page transformation and introduced the UI component of vux. This time, based on this project, let’s talk about components in vue.

Don’t ask me why I always write blogs about vue, it’s all for livelihood (………………)

This is the official document address (https://cn. vuejs.org/v2/guide/components.html#What is a component?), I have written a lot about components, and you will know at a glance that this is very useful.

I won’t introduce the concepts of some components one by one. The official documents are very detailed.

Let’s get to the point and download the project directly

One takes out the previous project

2 Under this requirement, it is natural to use our components and add the following code to index.js.

Vue.component('header-item', {
 props: ['message', 'backUrl'],
 template: `<header class="evaluate-header"><router-link :to="backUrl"><span><i class="iconfont"></i></span></router-link> <p><span>{{message}}</span></p> </header>`
})
// props用来传递数据
//template 一个html结构的模板

It should be noted that because vue routing was used in the previous project, the backUrl parameter is a configurable route and can be configured according to your own needs in the actual project.

三 Add code to the other two demo pages

Add the following code to demo1.vue

<header-item message="我是demo1头部" backUrl="/"></header-item>

Add the following code to demo2.vue

<header-item message="我是demo2头部" backUrl="/"></header-item>

Fourth, finally run and open the web page to see

Continue to dump the github address of the previous project https://github.com /qianyinghuanmie/vue-cli-

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to enlarge the image in JavaScript

##How to implement the China map in vue vuex axios echarts

How to switch between styles in vue

Solve the problem of the input box being blocked by the input method

How to solve the problem of soft keyboard blocking the input box in js

How to implement component interaction in Angular2

The above is the detailed content of How to componentize the common header of the page in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!