JS.vue笔记--组件

组件

组件化开发

、组件中的data必须是一个函数
、组件化的开发其实就是把页面拆分成一块一块的，每一个块可以看做是一个组件
、组件是一个可以重复使用的vue实例
、语法：
//vue的组件也是vue的一个实例
//my-header 为组件的名字
//{}组件的配置
//组件对应的html结构 – 模板
//使用该组件—>以标签的形式调用组件
Vue.component(‘my-header’,{
//全局注册组件

        //相当于new vue中的el
        template：`<header>头部</header>`

})

注册组件

全局注册组件
、定义组件 const MyHeader = {
//对象
template：<header>头部</header>

}
、全局注册组件
Vue.component(‘my-header’,MyHeader)
、使用组件
new Vue（{

}）
未完。。。

局部注册组件
、定义组件 const MyHeader = {
//对象
template：<header>头部</header>

}
、局部注册组件
new Vue（{
el：’#app’,
components:{
‘my-header’:MyHeader
}

}）
、使用组件

总结

定义===注册（全局，局部）===使用
、全局，不加s
、局部，在new vue 所有自定义的组件都要放在此处，要加s，写的是key：value形式

、用的更多的是局部注册组件

多组件

嵌套组件

、、关系==父子组件、兄弟组件
、、因为子组件在父组件内容区域内，所以需要在此内部进行注册组件
、、使用组件，也是在父组件内部使用子组件

小知识点

在标签之后
设置

抽离组件

。。。。未完待续

组件数据的初始化

、、组件内部所有初始化数据的形式语法：
data（）{
//组件数据初始化为一个data函数，返回一个对象
return {

}
}

父子组件间的传值

总结一句话：父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息
父传子

• 父组件在调用子组件的地方添加自定义的属性
• 属性的值就是需要传给子组件的值
• 如果属性的值是number，boolean，变量，需要用到绑定属性
• 在子组件定义的地方添加选项props，props的值可以为数组或对象
• 如果是数组，元素为父组件中自定义的属性名
• 在子组件中通过自定义的属性名，就可以得到父组件传过来的数据
• 如果是对象，，，，

总结：

父在调用子的地方添加自定义属性，在子组件定义的地方通过props向下传递数据给子，最后在子组件中通过自定义属性名接收父传来的数据
即：
1.先添加需要传递的数据
父在调用子的地方添加需要传递的数据
2.父发送：
父在定义子的地方传递数据
3.子接收：
在子中通过自定义属性名接收

   **子传父**

• 父组件在调用子组件的地方，绑定一个自定义事件，事件不加（）
• 在父组件methods中实现此事件，默认参数是将从子组件传递给父组件的值
• 在子组件中（可以是生命周期钩子函数，也可以是组件自己的事件），去 触发 父组件中的自定义事件

另表述

1. 父组件在调用子组件的地方绑定一个自定义事件方法，并传递到子组件内部
2. 子组件在内部调用父组件传过来的事件方法，同时把要发送给父组件的数据，在调用方法的时候当做参数传递进去
3. 父组件就接收到子组件传递过来的数据了

总结
核心思想 通过子传参给从父那里接收到的自定义事件实现传值

父发送：父先发送一个自定义事件：父在调用子时绑定了一个自定义事件方法传给子
子接收并发送：在子内部通过（this.$emit）调用接收到的事件方法，并把需要传送的数据当做参数传递   
父接收：父在自己methods方法里执行此事件

总结

 子组件发送：子组件通过$emit传参的方式将数据传给父
                 $emit（）两个参数，一个是接收到的父组件在调用子组件时自定义事件方法，两一个是需要传的数据
 父组件接收：在父组件中methods方法里执行绑定的事件

非父组件间的传值

中央事件组件
new Vue 作为中央事件组件
先监听 再发送
监听 bus.$on发送bus.$emit

动态组件
就是组件在切换的时候销毁与重建
保留组件状态，避免组件的重新渲染

生命周期函数面试题

1、什么是vue生命周期？
答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2、vue生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3、vue生命周期总共有几个阶段？
答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

4、第一次页面加载会触发哪几个钩子？
答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

5、DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

6、简单描述每个周期具体适合哪些场景？
答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom