VUE-3

VUE

组件

组件的命名，注意规范：

标签一定用肉串，或全小写

子组件注意需要包裹div

props:['使用小驼峰']

全局组件--局部组件

Vue.components('xxx',{

template:'xxx'

})

const Blog = {

template:'xxx'
components:{
    xxx //引用其他组件
}

}
注意

组件之间是单项数据流
--组件外部不能互相访问
--子组件数据传给父组件
--父组件自定义方法，子组件在事件函数中调用！

父子组件间信息传递
-- 父传子：prop = ['']
-- 子传父:

父组件
methods : {

父组件方法(参数) {
    console.log(参数)
}

}

子组件：
methods : {

子组件方法() {
    this.$emit('父组件自定义方法',传参)
}

}

--组件外部不能访问组件内部的数据
--组件内部不能修改组件外部的数据

--不允许子组件修改父组件的数据
--也不允许父组件修改子组件的数据

父子组件传参

局部子组件：应该在父组件定义之前定义；

通过父组件模板tem中传
.prop: [ 'xxx' ],子组件接收父组件传来的参数
在子组件中使用，this.xxx

插槽 --- slot，想在组件中放入内容，内容可以是标签，或文本

<div slot="aa"></div>
template: `

<div>
    <slot>可定义多个插槽</slot>
<slot name=''>且可定义name属性，来渲染name对应的原HTML标签</slot>
    <slot></slot>
 </div>

插槽prop--请看官网-还组件之间还可以访问参数的方法,父组件访问子组件的信息

动态组件-会被销毁及会执行destroyed钩子
异步组件，路由懒加载

<li :is="xxx"><li> 必须使用浏览器认识的标签
但是，li只是零时装填，还是看xxx组件中的模板tem中的内容标签。会替换掉li的！

使用<keep-alive></keep-live>缓存失去活性的组件，八个常用钩子失效，可用钩子activated,deactivated专为keep-alive使用！

一个组件的data必须是一个函数

浏览器渲染机制：ul下有的必须是li,所有vue中li装载模板变量

局部组件：注意全局注册

props:注意事项

props: ['必须使用小驼峰','小驼峰']

约束参数类型
props: {

"xxx":类型（String），
"xxx": Number
"xxx": [String,Number]
"xxx":{
    type:Number
    required:true
}
"xxx":{
    type:Number
    default: 100或function(){
        return 100xxx
    }
}
"xxx":{
    自定义
    validator:function(value){
        return value === ???  
    }
}

}

巨有用：非props
在父组件tem...中定义的属性,但是子组件中的props中没有定义，会在子组件的标签上显示，在prop中定义了，该属性就会消失在子组件标签上。
在子组件中使用
inheritAttrs: false,也可以使子组件不继承某些属性！

自定义组件使用v-model**

将原生事件绑定在组件上
@.click.native=""事件在父组件域上，执行调用在子组件。

父子组件数据通信！
方法一：
父组件作用域下：
update:
v-xxx:update:xxx
子组件:
$emit('update:xxx',xxx-参数)
方法二：
父组件作用域下
:title.sync="title"
子组件:
$emit('update:xxx',xxx-参数)

混入-就是很多混子混进来了-大家一起混--继承--公用！

mixins:[xxx,xxx]
原定义的option中的方法会顶掉混子，即mixins中的方法

data 会 merge，相同则覆盖。其他options也是一样咯！

边界处理：

子组件标签中定义<xxx ref=''>
父访问子 $refs

子访问父 $parent
子访问更节点 $root

依赖注入
父组件 provide: function () {