Vue(三)——脚手架,自定义事件,插槽

博主主页: 糖 -O-


vue专栏:Vue全家桶


上一篇: vue2与vue3生命周期的区别


希望各位博主多多支持!!!

      • 2.1 脚手架
          • 2.1.1. 脚手架文件结构
          • 2.1.2. render函数
      • 2.2. vue 的知识
          • 2.2.1. ref属性
          • 2.2.2. props配置项
          • 2.2.3. mixin(混入)
          • 2.2.4. 插件
          • 2.2.5. scoped样式
      • 2.3 组件自定义事件


2.1 脚手架

  • 第一步(没有安装过的执行):全局安装 @vue/cli

    npm install -g @vue/cli

  • 第二步:切换到要创建项目的目录,然后使用命令创建项目

    vue create 文件夹名

  • 第三步:启动项目

    npm run serve

2.1.1. 脚手架文件结构

安装之后,会出现如下的结构:

Vue(三)——脚手架,自定义事件,插槽_第1张图片

2.1.2. render函数

使用 import 导入第三方库的时候不需要 加 './'

导入自己写的:

import App from './App.vue'

导入第三方的

import Vue from 'vue'

通过 module 确定需要引入的文件,回到 render 函数,以前的写法是:

import App from './App.vue'

new Vue({
	el:'#root',
	template:``,
	components:{App},
})

报错的意思是,是在使用运行版本的 vue ,没有模板解析器。

引入的 vue一般都不是完整版的,所以残缺的vue.js 只有通过 render 函数才能把项目给跑起来。
来解析一下render

// render最原始写的方式
// render是个函数,还能接收到参数a
// 这个 createElement 很关键,是个回调函数
new Vue({
  render(createElement) {
      console.log(typeof createElement);
      // 这个 createElement 回调函数能创建元素
      // 因为残缺的vue 不能解析 template,所以render就来帮忙解决这个问题
      // createElement 能创建具体的元素
      return createElement('h1', 'hello')
  }
}).$mount('#app')

因为 render 函数内并没有用到 this,所以可以简写成箭头函数。

new Vue({
  // render: h => h(App),
  render: (createElement) => {
    return createElement(App)
  }
}).$mount('#app')

再简写:new Vue({
  // render: h => h(App),
  render: createElement => createElement(App)
}).$mount('#app')

2.2. vue 的知识

2.2.1. ref属性
  • 被用来给元素或子组件注册引用信息(id的替代者)

  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)

  • 使用方式:

    • 打标识:

      .....

    • 获取:this.$refs.xxx
<template>
	<div>
		<h1 v-text="msg" ref="title">h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素button>
		<School ref="sch"/>
	div>
template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue!'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			}
		},
	}
script>

2.2.2. props配置项

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

传递数据:

接收数据:

  • 只接收:props:['name']

  • 限制类型:props:{name:String}

  • 限制类型、限制必要性、指定默认值:

    props:{
    	name:{
            type:String, //类型
            required:true, //必要性
            default:'等待' //默认值
    	}
    }
    

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

实例:父组件给子组件传数据——App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student>Student>
    <School name="haha" :age="this.age">School>
  div>
template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  data () {
    return {
      age: 360  
    }
  },
  components: {
    School,
    Student
  }
}
script>

School.vue

<template>
  <div class="demo">
    <h2>学校名称:{{ name }}h2>
    <h2>学校年龄:{{ age }}h2>
    <h2>学校地址:{{ address }}h2>
    <button @click="showName">点我提示学校名button>
  div>
template>

<script>
export default {
  name: "School",
  // 最简单的写法:props: ['name', 'age']
  props: {
    name: {
      type: String,
      required: true // 必须要传的
    },
    age: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.name);
    },
  },
};
script>
<style>
.demo {
  background-color: orange;
}
style>
2.2.3. mixin(混入)

混入 (mixin) 提供了一种方式,分发 Vue组件中的可复用功能
一个混入对象可以包含任意组件选项
当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

选项合并

当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。

比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项,例如 methodscomponentsdirectives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

全局混入不建议使用

2.2.4. 插件

插件通常用来为 Vue 添加全局功能,插件的功能范围没有严格的限制

通过全局方法 Vue.use() 使用插件。它需要在你调用 new 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
}

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('你好啊aaaa') }
    }
}

main.js

// 引入插件
import plugin from './plugin'

// 使用插件
Vue.use(plugin)
2.2.5. scoped样式

让css样式在局部生效,防止冲突

写法:

2.3 组件自定义事件

组件自定义事件是一种组件间通信的方式,适用于:子组件 ===> 父组件

假设A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在中)。

绑定自定义事件:

  • 在父组件中:

App.vue

<template>
	<div class="app">
		
		<Student @atguigu="getStudentName"/> 
	div>
template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				msg:'你好啊!',
				studentName:''
			}
		},
		methods: {
			getStudentName(name,...params){
				console.log('App收到了学生名:',name,params)
				this.studentName = name
			}
		}
	}
script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
style>

Student.vue

<template>
	<div class="student">
		<button @click="sendStudentlName">把学生名给Appbutton>
	div>
template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
			}
		},
	}
script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
style>

  • 在父组件中,使用 this.$refs.xxx.$on() 这样写起来更灵活,比如可以加定时器啥的。

App.vue

<template>
	<div class="app">
		
		<Student ref="student"/>
	div>
template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student},
		data() {
			return {
				studentName:''
			}
		},
		methods: {
			getStudentName(name,...params){
				console.log('App收到了学生名:',name,params)
				this.studentName = name
			},
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件(一次性)
		},
	}
script>

<style scoped>
	.app{
		background-color: gray;
		padding: 5px;
	}
style>

Student.vue

<template>
	<div class="student">
		<button @click="sendStudentlName">把学生名给Appbutton>
	div>
template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
			}
		},
		methods: {
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,666,888,900)
			}
		},
	}
script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
style>

若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。

触发自定义事件:this.$emit('atguigu',数据)

使用 this.$emit() 就可以子组件向父组件传数据

解绑自定义事件:this.$off('atc')

this.$off('atc') //解绑一个自定义事件
// this.$off(['atc','demo']) //解绑多个自定义事件
// this.$off() //解绑所有的自定义事件

组件上也可以绑定原生DOM事件,需要使用native修饰符



⭐⭐⭐注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods
中,要么用箭头函数,否则this指向会出问题!

你可能感兴趣的:(vue,vue.js)