Vue-Vue常用组件

Vue-Vue常用组件

1、@refreshDataList

在 Vue.js 中，@refreshDataList 是一个自定义事件，通常用于通知父组件刷新数据列表。这种模式在子组件需要触发父组件中的某个方法时非常常见。
示例场景
假设你有一个父组件 ParentComponent 和一个子组件 ChildComponent。子组件中有一个按钮，点击按钮时需要通知父组件刷新数据列表。

父组件 (ParentComponent.vue)

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
	ChildComponent
  },
  data() {
	return {
	  dataList: [
		{ id: 1, name: 'Item 1' },
		{ id: 2, name: 'Item 2' },
		// 更多数据...
	  ]
	};
  },
  methods: {
	refreshDataList() {
	  // 这里可以是从 API 获取数据，或者直接更新数据列表
	  this.dataList = [
		{ id: 3, name: 'Item 3' },
		{ id: 4, name: 'Item 4' },
		// 更多数据...
	  ];
	}
  }
};
</script>

子组件

<script>
export default {
  methods: {
	refreshData() {
	  // 触发父组件的 refreshDataList 事件
	  this.$emit('refreshDataList');
	}
  }
};
</script>

解释
父组件:

父组件通过 @refreshDataList="refreshDataList" 监听子组件的 refreshDataList 事件。

当子组件触发 refreshDataList 事件时，父组件的 refreshDataList 方法会被调用，从而更新 dataList。

子组件:

子组件中有一个按钮，点击按钮时会调用 refreshData 方法。

refreshData 方法通过 this.$emit('refreshDataList') 触发 refreshDataList 事件，通知父组件刷新数据列表。

总结
@refreshDataList 是一种常见的父子组件通信方式，子组件通过触发事件来通知父组件执行某些操作。这种方式使得组件之间的职责更加清晰，父组件负责管理数据，子组件负责触发操作。

2、@keyup.enter.native

3、 :picker-options=

<el-date-picker type="date" placeholder="" value-format="yyyy-MM-dd" v-model="dataForm.stockTime"
			:picker-options="{
			  disabledDate: (time) => time.getTime() < new Date(new Date().setHours(0,0,0,0))
			}"