Vue组件文件的注意项

ref属性

ref属性

• 被用来给元素或子组件注册引用信息（id的替代者)
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
• 使用方式:
  打标识：<h1 ref="xxx">.....</h1>或<School ref="xxx"></School>
  获取：this.$refs.xxx

<!--  App.vue  -->
<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM">点击出现上方DOM元素</button>
    <School ref="sch"></School>
  </div>
</template>

<script>
//引入组件
import School from "./components/School.vue";

export default {
  name: "App",
  data() {
    return {
      msg: "欢迎学习",
    };
  },
  components: {
    School,
  },
  methods: {
    showDOM() {
      console.log(this.$refs.title);
      console.log(this.$refs.bth); //真实DOM元素类型
      console.log(this.$refs.sch); //school组件的实例对象（vc）
    },
  },
};
</script>

配置项props

功能：让组件接收外部传过来的数据

• 传递数据:<Demo name="xxx"/>

• 接收数据：

  • 第一种方式（只接收）：props: ['name']

  • 第二种方式（限制类型）：props:{name : Number}

  • 第三种方式(限制类型、限制必要性、指定默认值）：

    props:{
    name:{
    type:String, //类型
    required:true，//必要性
    default:'老王’, //默认值}
    }
    }

备注: props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<!-- student.vue  -->
<template>
  <div>
    <h2>学生名称：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge }}</h2>
    <button @click="updateAge">尝试修改收到的年龄</button>
  </div>
</template>

<script>
export default {
  name: `Student`,
  data() {
    return {
      msg: "我是一个学生",
      myAge: this.age,
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
  // props:['name','sex','age'],//简单接收

  // //接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String,
  // }

  //按收的同时对数据:进行类型限制+默认值的指定+必要性的限制
  props: {
    name: {
      type: String,
      required: true, //name是必要的
    },
    age: {
      type: Number,
      default: 99, //默认值
    },
    sex: {
      type: String,
      required: true,
    },
  },
};
</script>

mixin(混入)

功能：可以把多个组件共用的配置提取成一个混入对象

使用方式:
第一步定义混合,例如:

{
data(){....}，
methods:{....}
....
}

第二步使用混入，例如:

• 全局混入: Vue.mixin(xxx)
• 局部混入: mixins: [ 'xxx' ]

<script>
import {hunhe ,hunhe2} from '../mixin'
export default {
  name: `Student`,
  data() {
    return {
      name: "苏槿年",
      address:'武汉',
    };
  },
  mixins:[hunhe,hunhe2]
};
</script>

插件

功能:用于增强Vue
本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件:
对象.install = function (Vue,options){
1.添加全局过滤器
Vue.filter(....)

2.添加全局指令
Vue.directive(....)

3.配置全局混入(合)
vue.mixin(....)

4.添加实例方法
Vue.prototype.$myMethod = function(){......}
Vue.prototype.$myProperty = XXXX

使用插件:Vue.use()

scoped样式

作用:让样式在局部生效，防止冲突。
写法: <style scoped>

总结

• 组件化编码流程：

  • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

  • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    • 一个组件在用：放在组件自身即可。
    • 一些组件在用：放在他们共同的父组件上(状态提升)。

  • 实现交互：从绑定事件开始。

• props适用于：

  • 父组件==>子组件 通信
  • 子组件==>父组件 通信(要求父先给子一个函数)

• 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的!

• props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。