VUE3 development introductory tutorial: Use Vue.js plug-in to encapsulate the search box component

Vue.js is a popular JavaScript framework, and VUE3 is its latest version, which provides faster speed and more powerful features. In this article, I will show you how to encapsulate a simple search box component using VUE3 and Vue.js plug-ins.

1. Create Vue project

First, you need to install VUE3 and Vue-cli. After installing Vue-cli, you can enter the following command to create a new vue project:

vue create search-box

and then follow the prompts to install.

2. Create a new plugin

In the project folder you need to create a new plugin. In the src folder, create a file called search-box.js. In this file, you will define the search box component and plugin.

In search-box.js, we need to import Vue first:

import Vue from 'vue'

Then, we can define a new Vue component named SearchBox:

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

In In the above code, we have defined a simple search box component. The component has an input box, a button and a function that can handle the search. If the user clicks the search button or presses the Enter key, the searchTerm value will be sent to the parent component via the emit event.

3. Install plugin

We need to use the Vue plugin to convert search-box.js into a usable Vue plugin. At the end of the search-box.js file, add the following code:

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

In this way, we have created a usable Vue.js plugin. We can use this plug-in in Vue projects.

4. Using plugins

Now, we need to use the search-box plugin in the Vue project. To do this, import the search-box.js plugin in your project's main.js file and install the plugin using the Vue.use method:

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

Now we have the search-box plugin installed. It can be used in Vue projects.

5. Using SearchBox in the component

In the Vue project, we can use the search box component. For example, in a component named App.vue, we can add a component named search:

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

In the above code, we have added a component named search and added to it A method called doSearch. Method is called when the user searches and it displays an alert box containing the search term.

6. Run the Vue project

Finally, we only need to run the Vue project. In the command line terminal, enter the following command:

npm run serve

This will start the Vue project. Open http://localhost:8080 in your browser to view the search box component.

Conclusion

In this tutorial, we have learned how to use the Vue.js plugin to encapsulate a simple search box component. We have learned how to use this component in VUE3 projects and found VUE3 to be faster, more powerful, and easier to use. Now you can use this knowledge to build your own Vue.js application.

The above is the detailed content of VUE3 development introductory tutorial: Use Vue.js plug-in to encapsulate the search box component. For more information, please follow other related articles on the PHP Chinese website!