Vue

组件注册

组件化的概念：

Web中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件(如硬盘，键盘，鼠标)，他是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融化，变成一个完整的应用

组件化的特性：

高内聚性，组件功能必须是完整的，如果要实现下拉菜单功能，那在下拉菜单这个组件中，就要把下拉菜单所需要的所有功能全部实现。

低耦合度，就是代码独立，不会和项目中的其他代码发生冲突

组件化的优点：

·提高开发效率

·方便重复使用

·简化调试步骤

·提升整个项目的可维护性

·便于协同开发

有两种组件的注册类型：

• 全局注册
• 局部注册
  全局注册能在任何Vue实例中使用
  局部注册只能在当Vue实例中使用

基本实例
全局

<div id="components-demo">
<button-counter><tton-counter>
</div>

 

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return { count: 0 }
},
template: '<button v-on:click="count++">点击了 {{ count }} 次<tton>'
})
new Vue({ el: '#components-demo' })

注：一个组件的 data 选项必须是一个函数

局部组件
在挂载类下书写Vue.component

new Vue({ 
el: '#app', 
components: { 
'component-a': ComponentA,
'component-b': ComponentB 
} 
})

Props

通过props选项，可以向子组件传递内容，所以即使是同一个组件，根据props的值也可以渲染出不同的内容。

如果想要向子组件传递数字，布尔值，数组，对象，需要使用 v-bind 指令，否则传递过去的只是单纯的字符串。

除了数组以外，props的值还可以对应是一个对象，并且在对象中设置数据类型的验证。

单项数据流

所有的prop都使得其父子prop之间形成了一个单向向下绑定：父级prop的更新会向下流动到子数组中，但是反过来就不行。

<template>
    <div id="app">
        <Home :num="message"/>
    </div>
</template> 
 
<script>
import Home from "./compontents/home/index.vue";
export default {
    name:"App",
    components:{
        Home
    },
    data(){
        return{
            page:"Home",
            message:1999
        }
    }
}
</script>

非父子组件通信

父子级不进行任何共同，由一个中间人来代替

<div id="app1">
        <component-a></component-a>
        <component-b></component-b>
</div>
<script>
  var bus = new Vue();
    var app1 = new Vue({
        el: '#app1',
        components: {
            'component-a': {
                template:  `
                <p>{{message}}{{changeMsg}}</p>
                `,
                data() {
                    return {
                        message: ''
                    }
                },
                computed:{
                  changeMsg() {
                    var that = this;
                    // 监听来自bus实例的事件
                    bus.$on('on-message',function(msg) {
                    that.message = msg;
                })
                }
                } 
            },
            'component-b': {
                template: `
                <button @click="handleEvent">传递事件</button>
                `,
                methods: {
                    handleEvent: function() {
                        // 点击按钮通过bus把事件on-message发出去
                        bus.$emit('on-message','来自组件component-b的内容')
                    }
                }
            }
        }
     
    });
</script>

插槽

1. 匿名插槽

匿名插槽的作用： 保留组件中的所有原始标签内容，这种插槽被称为匿名插槽

直接在组件中写上slot标签对，就可以在根元素中的引用的组件中间显示所写的内容

2. 具名插槽

凡是具有name属性的slot标签，就被称为具名插槽即(在子组件中写，写的位置不同，在引用该模板的页面中显示的位置也会不一样)。

作用：

1. 在组件的原始内容的某个标签中，添加slot=top属性，指明该标签所对应的插槽的名称

2. 在组件模板中通过调用slot标签，兵设置name=top属性，会自动将对应的标签内容添加至当前slot标签所在的位置

注意：原始内容凡是具有slot属性的标签，内容只能添加至组件模板中具有相同值的name属性的slot标签中

匿名插槽的作用： 保留了原始数据，除了具名插槽标签中的内容，即凡是标签中具有slot=top的属性标签

3. 作用域插槽

在组件的原始内容中，通过slot-scope属性接受作用域插槽传递的值，即obj={title：‘标题’，num：19}

作用域插槽:将组件模板中的数据传递给组件的原始内容

1. 在slot开始标签中，添加要传递的数据，避开name属性（具名插槽）

2. 在原始内容中通过slot-scope属性（其值是自定义的）接受传递的数据，即slot-scope=varName(本质是个对象，存储传递的数据，即数据会自动转换成键值对，存储在这个对象里，所以属性名对应属性名，属性值对应属性值）