【Vue CLI 】（更新中）

目录

• • ref
  • props（用于从父组件向子组件传递数据）
  • mixin
  • 插件（增强：Vue.use()）
  • scoped（局部样式）
  • 本地存储
  • [自定义事件（emit）](#自定义事件（emit）)

ref

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

<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（用于从父组件向子组件传递数据）

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

mixin

<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()）

Vue.use(plugins)

scoped（局部样式）

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

<style scoped  lang="css">

</style>

本地存储

自定义事件（$emit）

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

<template>
	<div class="app">
 
		<!---通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
		<School:getschoolName="getSchoolName"/>
		
		<!--通过父组件给了组件绑定一个自定义事件实现:了给父传递数据(第一种写法,使用@或v-on)-->
		 <Student @atguigu="getStudentName"/> 
		 
		<!--通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第二种写法,使用ref)-->
		<Student ref="student"/>
	</div>
</template>