Vue(四)——脚手架，自定义事件，插槽

2.1 脚手架

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

  `npm install -g @vue/cli`
  

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

  vue create 文件夹名

• 第三步：启动项目

  `npm run serve`
  

2.1.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:`<App></App>`,
    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）

• 使用方式：

  • 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
  • 获取：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配置项

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

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

接收数据：

• 只接收：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('组件钩子被调用')
  }
})

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

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

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样式在局部生效，防止冲突

写法：<style scoped>

<style lang="less" scoped>
    .demo{
        background-color: pink;
        .atguigu{
            font-size: 40px;
        }
    }
</style>

2.3 组件自定义事件

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

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

绑定自定义事件：

• 在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

App.vue

<template>
    <div class="app">
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
        <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">把学生名给App</button>
    </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">
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
        <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">把学生名给App</button>
    </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修饰符

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>

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