vue封装搜索组件

最新推荐文章于 2024-07-02 11:47:41 发布

「已注销」

最新推荐文章于 2024-07-02 11:47:41 发布

阅读量963

点赞数

文章标签： vue.js es6 html5 css3 javascript

本文链接：https://blog.csdn.net/can0101/article/details/106484267

版权

本文介绍如何在Vue.js中封装一个搜索组件，包括引入组件、设置组件路径以及实现事件处理代码，专注于使用es6语法和HTML5、CSS3进行前端开发。

摘要由CSDN通过智能技术生成

vue封装搜索组件

1、引入搜索组件

<Serach v-on:inputValue="inputValue" />

2、引入搜索组件路径

import Serach from './Search'

3、事件处理代码

export default {
  components: {
    Serach
  },
  methods: {
    inputValue (inpVal) {
      console.log(inpVal)
    }
  }
}

搜索框组件代码

<template>
  <div class="search"><!-- 搜索组件 -->
    <!-- 搜索左边区域 -->
    <div class="search_left"></div>
    <!-- 搜索区域 -->
    <div class="search_input">
      <div class="search_input_icon">
        <svg t="1590583132901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2822" width

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue封装搜索组件

vue封装搜索组件1、引入搜索组件<Serach v-on:inputValue="inputValue" />2、引入搜索组件路径import Serach from './Search'3、事件处理代码export default { components: { Serach }, methods: { inputValue (inpVal) { console.log(inpVal) } }}搜索框组件代码<
复制链接

扫一扫