如何使用Vue封装Search组件

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

原创最新推荐文章于 2024-07-02 11:47:41 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #封装组件

本文详细介绍了在Vue.js中如何实现组件的双向数据绑定，通过使用v-model指令和$emit方法，实现子组件向父组件的数据传递。文章通过具体代码示例展示了Search组件的创建与调用过程。

<template>
     <div>
        <input
          type="text"
          :value='value'
          class='search'
          placeholder="请输入内容"
          @input='ch'
      />

     </div>

</template>

<script>
export default {
  name: 'search',
  props: {
    value: {
      type: String,
      default: 'ssl'
    }
  },
  methods: {
    ch (e) {
        this.$emit('input',e.target.value)
    }
  }
}
</script>

<style lang="scss">
.search:after {
    content:''
}
</style>

使用的话在其想调用的组件直接调用

<template>
  <div>
		<Search v-model='value'></Search>
		{{value}}
  </div>
</template>

<script>
import Search from "@/components/Search"
import Bus from "../utils/Bus"
export default {
	components:{Search},
	data(){
        return {
		  value: 'ssl'
        }
	}
}
</script>

这里涉及到一个问题，就是关于组件上使用v-mode之前封装的开关组件也涉及到了这个问题
这里呢在子组件中使用this.$emit()就可以解决了
整体思路还是比较简单的，需要注意就是如果在父组件上调用子组件，并且给子组件绑定v-model
那么在子组件中使用this.$emit派发事件就ok了,如果是关于input的，那么在派发事件的时候使用this.$emit('input');