【Vue CLI 】(更新中)

目录

ref

用于在模板中为元素或子组件创建引用

javascript 复制代码
<template>
  <div>
    <input ref="myInput" type="text" placeholder="Enter your name">
  </div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myInput.focus(); // 在 mounted 钩子中访问 ref
  }
};
</script>

props(用于从父组件向子组件传递数据)

javascript 复制代码
<script>
export default {
  props: {
    message: {
      type: String,
      required: true // 必须传递
    },
    count: {
      type: Number,
      default: 0 // 默认值
    }
  }
}
</script>

mixin

javascript 复制代码
<script>
import { requestMixin } from './requestMixin.js';

export default {
  mixins: [requestMixin],
  data() {
    return {
      items: []
    };
  },
  methods: {
    onFetched(data) {
      this.items = data;
    }
  },
  created() {
    this.$on('data-fetched', this.onFetched);
  }
};
</script>

插件(增强:Vue.use())

javascript 复制代码
Vue.use(plugins)

scoped(局部样式)

它允许你在组件内部定义样式,并且这些样式只作用于当前组件,不会影响其他组件。这有助于避免样式冲突,提高样式的可维护性和模块化。

css 复制代码
<style scoped  lang="css">

</style>

本地存储

自定义事件($emit)

用于从子组件向父组件传递消息。通过 $emit,子组件可以触发自定义事件,并传递数据给父组件

html 复制代码
<template>
	<div class="app">
 
		<!---通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
		<School:getschoolName="getSchoolName"/>
		
		<!--通过父组件给了组件绑定一个自定义事件实现:了给父传递数据(第一种写法,使用@或v-on)-->
		 <Student @atguigu="getStudentName"/> 
		 
		<!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref)-->
		<Student ref="student"/>
	</div>
</template> 
相关推荐
ankleless12 分钟前
C语言(12)——进阶函数
前端·html
一条上岸小咸鱼16 分钟前
Kotlin 基本数据类型(四):String
android·前端·kotlin
我是哈哈hh30 分钟前
【Node.js】ECMAScript标准 以及 npm安装
开发语言·前端·javascript·node.js
张元清1 小时前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手1 小时前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨1 小时前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗1 小时前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈
pepedd8641 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd8641 小时前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界1 小时前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript