Vue脚手架学习 - 1

1. Vue 与 VueComponent 的内置关系

VueComponent实例对象.proto === VueComponent.prototype.proto === vm.proto === Vue.prototype

2.单文件组件

复制代码
<template>
</template>

<script>
	export default {
		name: [Vue的文件名],
		data() {
			return {
			
			}
		}
	}
</script>
<style>
</style>

3. Vue-Cli

3.1 $refs
复制代码
<!-- ref 加在组件上是获取该组件的实例对象,加在html标签是获取该标签的dom对象(本质上相当于加了个id给标签) -->
<button ref="but">
<School ref="schoolRef"/>

...
console.log(this.$refs.but) //<>  
console.log(this.$refs.but) 
3.2 props

组件通信

3.2.1 父 -> 子 传数据

父亲通过在子组件上定义标签 将参数传给儿子,儿子通过propos:[]的形式获取传过来的数据,可通过this.属性获取

App.vue

vue 复制代码
<template>
  <div id="app">
    <school schoolName="实验学校" position="广东"/>
  </div>
</template>

school.vue

vue 复制代码
<div>
 <div>{{ schoolName }}</div>
</div>
<script>
	export default{
        name: 'school',
        props: ['schoolName', 'position'] //通过数组形式传参数
</script>
3.2.2 子 -> 父 传数据

父亲在子组件标签上单向绑定 一个方法,儿子通过props:[] 获取传过来的方法(props里的参数需要用 '')通过this.方法名调用父亲所绑定的方法,从而给父亲传参数

App.vue

vue 复制代码
<template>
  <div id="app">
      <!-- getSchoolName不可以加括号,否则报错 -->
    <school :getSchoolName="getSchoolName" /> 
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
      //接收儿子传来的schoolName
    getSchoolName(name) {
      //getSchoolName的this对象是子组件实例对象
      console.log(name)
    }
  },
  mounted() {
  }
}
</script>

school.vue

vue 复制代码
<template>
    <div>
        <div>{{schoolName}}</div>
         <button @click="getSchoolNameForApp">点我App.vue获取我的名字</button>
    </div>
</template>

<script>
    export default{
        name: 'school',
        data() {
            return {
            }

        },
        methods: {
            //子定义的方法不要和父亲传过来的方法重名,不然会报错
            getSchoolNameForApp() {
                //子组件对象调用父亲的方法,将schoolName传了过去
                this.getSchoolName(this.schoolName)
            }
        },
        mounted() {
            
        },
        props: ['getSchoolName'] 
    }
</script>
3.3 混入mixin

多个组件存在相同的代码时,可以写在mixin.js 中,并对外暴露,而需要这些代码的组件通过引入并在 mixin:[] 中注册即可(mixin里的参数无需用 '')

3.3.1 局部混入

school.vue

vue 复制代码
<template>
    <div>
        <div>{{like}}</div>
    </div>
</template>
<script>
    import {data_mixin} from '@/mixin';
    export default{
        name: 'school',
        data() {
            return {
            }
        },
        mixins: [data_mixin]
        ,
        methods: {
        },
        mounted() {
            
        },
    }
</script>

App.vue

vue 复制代码
<template>
  <div id="app">
    <school />
  </div>
</template>
<script>
import school from './components/school.vue';
export default {
  name: 'App',
  components: {
    school
  },
  methods: {
  },
  mounted() {
  }
}
</script>

mixin.js

js 复制代码
export const data_mixin = {
    data() {
        return {
            like: 'basketball',
        }
    }
}
3.3.2 全局混入

在 main.js 中引入并全局注册后,所有组件都会持有该混入

main.js

vue 复制代码
import { data_mixin } from '@/mixin.js';
Vue.mixin(data_mixin);
3.4 插件

一定以 install(Vue) 为函数名,里面可以有全局过滤器、全局指令、全局混入等等

plungins.js

js 复制代码
export default {
    //一定要以 install(Vue) 作为函数名
    install(Vue) {
        //里面配置的东西都是全局的
        Vue.filter('slice', function (value) {
            return '213';
        })
    }
}

main.js

js 复制代码
import plungins from './plungins';
Vue.use(plungins)
3.5 Storage

LocalStorage : 存在客户端电脑

SessionStorage: 一次会话

setItem('key', 'value')
getItem('key')
removeItem('key')
clear()
3.6 自定义事件
3.6.1 $emit

用于 子 -> 父 通信, 在子组件上使用 自定义事件 @XXX= "YYYY" ,再通过在子组件中 this.$emit.('YYYY', [参数1], [参数2]...) 触发事件,即可实现 子 -> 父的通信

school.vue

vue 复制代码
<script>
    export default{
        name: 'school',
        data() {
            return {
                schoolName: '实验学校',
            }
        },
        methods: {

        },
        mounted() {
            //调用父亲的getSchoolName
            this.$emit('getSchoolName', this.schoolName)
        },
    }
</script>

App.vue

vue 复制代码
<template>
  <div id="app">
      <!-- 自定义事件getSchoolName -->
    <school @getSchoolName="getSchoolName" />
  </div>
</template>
<script>
import school from './components/school.vue';

export default {
  name: 'App',
  components: {
    school,
  },
  methods: {
    getSchoolName(name) {
      console.log(name);
    }
  },
  mounted() {
  }
}
</script>

<style>
</style>
3.6.2 解绑 $off

通过在子组件中 this.$off('YYYY') 解绑

相关推荐
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed2 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中2 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h2 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa