前端小栈

# 组件相关

# 关于 VueComponent

  1. 组件本质是一个名为VueComponent的构造函数，是 Vue.extend() 生成的
  2. 关于 this 指向
    组件配置中data函数、methods中的函数、watch中的函数、computed中的函数 它们的 this 均是 VueComponent实例对象

# 关于 Vue和VueComponent关系

图片

  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象vc可以访问到 Vue原型上的属性、方法

# ref 属性

获取实际dom元素或者组件对象的属性

  • 使用方式
    a. 标识：<h1 ref="xxx"></h1>或<School ref="xxx"></School>
    b. 获取：this.$refs.xxx

# props 配置项

props父子组件传值

  • 传递数据<Demo name="xxx" :age="18"/>这里age前加:，通过v-bind使得里面的18是数字
  • 接收数据
    第一种方式（只接收）props:['name', 'age']
    第二种方式（限制类型）props:{name:String, age:Number}
    第三种方式（限制类型、限制必要性、指定默认值）
props: {
 name: {
     type: String,	 // 类型
     required: true,// 必要性
     default: 'cess'// 默认值
 }
}
1
2
3
4
5
6
7

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

# mixin 混入

  • 使用方式
  1. 定义混入
const mixin = {
    data() {....},
    methods: {....}
    ....
}
1
2
3
4
5
  1. 使用混入
    a. 全局混入Vue.mixin(xxx)
    b. 局部混入mixins:['xxx']

TIP

1.组件和混入对象含有同名属性时，属性将进行“合并”，在发生冲突时以组件优先 2.同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

src/mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

src/components/Student.vue

<template>
  <div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  import {hunhe,hunhe2} from '../mixin'

  export default {
    name:'Student',
    data() {
      return {
        name:'张三',
        sex:'男'
      }
    },
    mixins:[hunhe,hunhe2]	// 局部混入
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# plugin 插件

  1. 包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
  2. 定义插件（见下 src/plugin.js）
  3. 使用插件：Vue.use() src/plugin.js
export default {
  install(Vue,x,y,z){
    console.log(x,y,z)
    //全局过滤器
    Vue.filter('mySlice', function(value){return value.slice(0,4)})

    //定义全局指令
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element,binding){element.value = binding.value},
      //指令所在元素被插入页面时
      inserted(element,binding){element.focus()},
      //指令所在的模板被重新解析时
      update(element,binding){element.value = binding.value}
    })

    //定义混入
    Vue.mixin({
      data() {return {x:100,y:200}},
    })

    //给Vue原型上添加一个方法（vm和vc就都能用了）
    Vue.prototype.hello = ()=>{alert('你好啊')}
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

src/main.js

import Vue from 'vue'
import App from './App.vue'
import plugins from './plugins'	// 引入插件

Vue.config.productionTip = false

Vue.use(plugins,1,2,3)	// 应用（使用）插件

new Vue({
	el:'#app',
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10
11
12

# scoped样式

WARNING

Vue中的webpack并没有安装最新版，导致有些插件也不能默认安装最新版，如 npm i less-loader@7，而不是最新版

← 8.自定义事件 →