注册组件，使用组件（项目中都是写component中）
为什么用组件：组件可以复用，每一个组件都是独立的，模板，数据，css样式互不影响
-
全局注册组件component：请勿滥用全局组件inx 因为 全局组件会造成组件名污染
-
vue2：Vue.component("组件名", { } ) 全局组件
-
-
vue3：app.component(“组件名字”, { } ) 全局组件
-
-
vue3: 局部注册组件components
-
<div id="app">
<my-header></my-header>
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
let app = Vue.createApp({
data () {
return {
}
},
components: { // 局部组件的注册
// 组件的名字：对象形式的配置项
'my-header':{
template:`<div>{{msg}}</div>`,
data() {
return {
msg:"子组件"
}
},
}
}
})
app.mount("#app")
</script>组件传参：解决组件之间数据无法共享（单向数据流原则）
-
vue中遵循是单向数据流，数据的流向是父到子，父组件的数据变化了，props中的数据就会立马的更新
-
props：父传子（只读属性）：子使用父data中数据（props 校验）
-
父中子组件 v-bind（自定义属性）绑定属性样式，属性值就是父的数据传递给子组件
-
在子中定义一个 props来接收场地过来的属性名
-
接收的props上的所有的数据，都可以直接在子组件的模板上使用，也可以使用在选项中（记得带this）即：methods，watch，computed
-
<!-- 父传子 --> <div id="app"> {{fMsg}} <!-- 子组件 --> <my-kun :title="fMsg" :hei="list[0].title" :num="list[0].price"></my-kun> </div> </html> <script src="./lib/vue.global.js"></script> <script> let app = Vue.createApp({ data() { return { fMsg: '父的数据在此', list: [{ title: '小黑子', price: 5 }, { title: '坤坤', price: 5 }, { title: '凡凡', price: 5 }] } } }) app.component('myKun', { template: `<div> {{zMsg}}-----{{title}}-----{{hei}}-----{{num}} </div>`, // props: ['title','hei','num'], props: { 'title': [String], 'hei': String, // 自定义类型校验函数 'num': { validator(value) { // The value must match one of these strings return ['你好', '不好',5].includes(value) } }, }, data() { return { zMsg: '爱坤才会赢' } } }) app.mount('#app') </script>
-
-
emits：子传父（监听事件）：父组件中使用子组件的数据（可以 emits 效验）
- 父中子组件绑定事件@myclick="fuMethod"
- 父中methods中使用 fuMethod( val ){ } 方法。用于接收子传递过来的数据，做处理
- 而 事件名 myclick则要去子组件中 emits中接收，绑定方法，然后使用（或者直接使用） 然后两种方式使用：
第一种： emits:['myClick'], //接收 methods:{ ziMethod(){ this.$emit('myclick', this.zMsg) } }, html中使用: @click="ziMethods"
第二种：接收后，直接html中使用 <button @click="$emit('someEvent')">click me</button> - - 父中接收，methods中的fuMethod方法做接收的处理。 处理完后根据：根据单向数据流原则，也自动更新视图
-
<!-- 父传子 --> <div id="app"> {{fMsg}} <!-- 子组件 --> <my-kun @myclick="fuMethod"></my-kun> </div> </html> <script src="./lib/vue.global.js"></script> <script> let app = Vue.createApp({ data() { return { fMsg: '父的数据在此', list: [{ title: '小黑子', price: 5 }, { title: '坤坤', price: 5 }, { title: '凡凡', price: 5 }] } }, methods: { fuMethod(msg) { console.log(111); this.fMsg = msg } } }) app.component('myKun', { template: `<div> {{zMsg}} <button @click="ziMethod">哈哈</button> </div>`, // 直接写template中 // <button @click="$emit('someEvent')">click me</button> // emits:["myclick"], emits: { // click: null, // 校验 submit 事件 'myclick': (payload) => { if (payload) { return true } else { console.warn('忘记传参了') return false } } }, data() { return { zMsg: '爱坤才会赢' } }, methods: { ziMethod() { this.$emit('myclick', this.zMsg) } } }) app.mount('#app') </script>
-
兄弟组件传值：
先实例化一个公共的通信对象eventBus.js，
其中一个兄弟组件通过$emit去发送触发事件 ，
一个组件通过$on接收监听事件
vue3：中没有明确的兄弟组件传值的方案，可以使用状态提升
（找到这两个组件共同的父级组件，然后通过父与子之间的传值实现）
//utils文件夹下：eventBus.js
import {createApp} from 'vue'
// 实例化通信对象，导出
export default createApp()跨组件传值（父传给儿子或者孙子）：依赖注入（provide ，injiect）
一个vue文件 provide只能写一个，写多个只有最后一个生效，所以，其他方法，
计算属性也是如此，自上而下执行代码，只有最后一个生效
特殊属性ref $parent $root
-
ref用于注册元素或子组件的引用。子组件最终会渲染成标签，同时传递的数据绑定在这个标签上
数据可以通过 $attrs.属性名 来获取属性值 -
使用选项式 API，引用将被注册在组件的
this.$refs对象里可以调用 -
放在标签上：获取的是所在标签的dom节点 放到组件上，获取子组件的方法属性
使用方法时记得方法要加（）调用。不要重复打印
-
- $parent：写子组件内可以获取父组件的方法属性，有就获取，没有则为 null
- $root：写子组件内可以获取 根组件的方法属性，有就获取，没有就是它自己
透传(属性)：Vue3：透传属性。透传又分为自动透传绑定，和手动绑定两种。
什么是透传属性？ 透传属性指组件在使用的时候，作用在组件上的属性，会被向下流动，绑定到组件内的标签中。
透传：父组件传递数据给子组件时，子组件接收父组件传递的属性 $attrs
透传作用：：：
- attribute继承：子继承父：eg：class，id，style，属性，事件等头可以透传到组件内的标签中。
- 对class和style合并
v-on监听继承
- 禁用透传属性是否继承属性： inheritAttrs: false
- 多根节点的继承：子组件使用props接收父组件传递的属性
内置组件
<KeepAlive> 缓存组件：用于包裹动态切换组件
<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。避免重复渲染组件（性能优化）
is：特殊Attribute用于绑定[动态组件]
//动态组件：包裹挂载点即可
<keep-alive>
<component :is="Com"></component>
</keep-alive>
//路由：包裹路由出口即可
<keep-alive>
<router-view/>
</keep-alive>
//属性：如果 我把两个都写了 excloud的优先级大于incloude
include 你要缓存谁
exclude 你不想缓存谁
<keep-alive exclude="Db,xxxxx,cccc">
<!-- 设置动态组件的挂载点 -->
<component :is="com"></component>
</keep-alive>
#### 钩子函数
activated：在进入到被kepp-alive管理的组件时候触发
deactivated：在离开被kepp-alive管理的组件时候触发
替代 `mounted`挂载后 和 `unmounted`销毁后。
<template>
<div>
aaaaaaaa
<input type="text" />
</div>
</template>
<script>
export default {
activated() {
console.log("进入到了被keep-alive管理的组件中了");
},
deactivated() {
console.log("离开到了被keep-alive管理的组件中了");
},
};
</script>动画组件 <Transiton />：里边只能放一个标签或者组件（使用vue官网查看）
name=" "：有名就写，没有就默认 mode="out-in"
一共有 6 个应用于进入与离开过渡效果的 CSS class
插槽 <slot /> 组件: 自定义组件里内容
默认插槽 <slot />
具名插槽 <slot name = "" />
自定义指令
局部指令：
-
局部指令：通过directives: { 插件名：{ 钩子函数 } } 选项来定义，只能在当前组件中使用
指令的功能：取决指令钩子的钩子函数 created，mouted，updated......
eg: 当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦
全局指令： 全局指令 v-指令名使用
-
全局指令：通过app.directive( 'cals' { })方法来定义，可以在任何组件中使用
-
指令的功能：取决指令钩子的钩子函数 created，mouted，updated......
-
eg:
-
插件 ：
-
定义插件
-
export default{ install(app){ } }
-
-
应用插件main.js
-
import from 导入插件
-
app.use(插件名) ：use方法在执行的时候会 自动寻找插件的 install 方法并执行该方法，完成插件的应用
mixins ：混入
作用：抽离多个组件的公共代码（选项），避免代码冗余
使用 ：混入的公共代码会出现在组件的选项位置
-
import导入mixins路径
混入：data同级自动混入
可以直接使用mixins里的方法属性了
