How to write a custom component using vue

This time I will show you how to use vue to write a custom definition component, and what are the precautions for writing a custom component using vue. The following is a practical case, let’s take a look together. take a look.

Write a vue component

What I write below is how to write a single file component ending with .vue, which is a project built based on webpack . If you still don’t know how to use webpack to build a vue project, you can move to vue-cli.

A complete vue component will include the following three parts:

1. template: Template

2. js: Logic

3. css: Style

Each component has its own template, js and style. If a page is compared to a house, the components are the living room, bedroom, kitchen, and toilet in the house. If the kitchen is taken out separately, the components can be knives, range hoods...etc. That is to say, pages are made up of components, and components can also be made up of components. This makes it very flexible and has very low coupling.

Let’s first look at how a component is written in a .vue file:

Vue.component('simple-counter', {
 template: '<p id="inputBox"><input type="text"></p>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})

What is template used for?

<template>
 <p id="inputBox">
 <input type="text">
 </p>
</template>
<!--
template就是这个组件的html，也就是下面部分（vue-loader会将template标签下的内容解析出来）：
-->
<p id="inputBox">
 <input type="text">
</p>
<!--
 对应原生写法的话，就是template内的dom字符串
-->

js part

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法，不懂的可以先去了解es6的模块化

css part

<style lang="scss" scoped>
...样式
</style>

Introduction

How to reference this component in other components?

Component one (button.vue)

<template>
 <p class="button">
 <button @click="onClick">{{text}}</button>
 </p>
</template>
<script>
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {
 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

Component two (box.vue)

<template>
 <p class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值（text）-->
 </p>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
</script>

I believe I read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to use scss in Angular projects

How to use vue2.0 koa2 mongodb to achieve registration and login

The above is the detailed content of How to write a custom component using vue. For more information, please follow other related articles on the PHP Chinese website!