Vue-七七创建全局组件——“Loading“ 使用extend创建组件——弹出层 单继承：vue组件间的继承。——继承js的部分 异步组件加载 异步组件工厂 组件插槽

Posted 2022-09-05 勇敢*牛牛

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年9月03日🌹
🆕最新更新时间：🎄2022年9月03日🎄
✉️人生的价值，并不是用时间考究，而是用深度去衡量的
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！

---

v-model/sync组件间传值sync创建全局组件——"Loading"使用extend创建组件——弹出层单继承：vue组件间的继承。——继承js的部分异步组件加载异步组件工厂组件插槽单个插槽/默认插槽/匿名插槽/具名插槽/作用域插槽

• • v-model/sync组件间传值
  • sync
  • 创建全局组件——"Loading"
  • 使用extend创建组件——弹出层
  • 单继承：vue组件间的继承。——继承js的部分
  • 异步组件加载
  • • 异步组件工厂
  • 组件插槽
  • • 单个插槽/默认插槽/匿名插槽
    • 具名插槽
    • 作用域插槽
    • 动态插槽

v-model/sync组件间传值

• v-model它可以对于表单项进行数据的双项绑定
• v-model它是一个语法糖，它是 value和事件[input[默认]]的集合体

<child v-model="title" />
意义等同于
<child :value="title" @input="setTitle" />

则子组件通过:props:["value"]获取。

<template>
    <div>
        <div>子组件</div>
        <h3>value</h3>
    </div>
</template>

<script>
export default 
    props:["value"]

</script>

++ 父组件
<div>
     <h1>父组件</h1>
     <input type="text" v-model="msg">
     <hr>
     <child v-model="msg"></child>
</div>

++ 子组件
<button @click="$emit('input',Date.now())">点击修改父组件信息</button>

---

修改默认事件：增加一个配置项；
默认的属性名：也可以修改

点击的时候就是事件名称的改变后的值。
<button @click="$emit('change',Date.now())">点击修改父组件信息


</button>
props:["msg"],
//修改v-model它的自定义事件名称，默认为input
model:
    //修改v-model它的自定义事件名称，默认为input
    event:"change",
    //修改v-model它的属性名称，默认为value
    prop:"msg"

---

sync

也能完成组件间的信息传值。
sync修饰符，他是一语法糖，动态属性和update：属性名称，事件。

父
<child :title.sync="msg"></child>

子
<button @click="setTitle">点击修改父组件信息</button>


props:["title"],
methods:
    setTitle()
        this.$emit("update:title",Date.now())/*固定写法*/
    

创建全局组件——“Loading”

index.js

import Vue from "vue";
/**
 * 在工程化中，全局组件没有了template,只有el,render,全局组件不能使用el.
 * render中的形参名称必须是h
 */
Vue.component("Loading",
    render:h=>
        // return h("h3",null,"加载中.......")
        // jsx语法
        return (
            <div>
                <h3>加载中.......</h3>
            </div>
        )
    
)

在入口文件中引入：

import '@/components/Loading/index.js'

那其实在工作当中他这个写法不常见：
他把这个全局定义组件给转为局部组件插入的方式生成：

#index.js

import Vue from "vue";
import Loading from './load.vue';
Vue.component("Loading",Loading)

#main.js
import Vue from 'vue'
import App from './App.vue'
import '@/components/Loading/index.js'
Vue.config.productionTip = false
new Vue(
    render: h => h(App),
).$mount('#app')

#App.vue
<Loading/>

使用extend创建组件——弹出层

不会影响层级，样式。
新建一个节点进行挂载：

index.js

import Vue from 'vue'
import Popup from './root2.vue'
const Cmp =  Vue.extend(Popup);
new Cmp().$mount("#root2")

在入口文件中导入：

import '@/components/root2/index.js'

点击后显示：

import Vue from 'vue'
import Popup from './root2.vue'
const Cmp =  Vue.extend(Popup);
export default () => new Cmp().$mount("#root2")
导出为一个方法，方法返回值执行一个对象。

##main.js
加载进导入工程文件中
import Pupop from '@/components/root2/index.js'
Vue.prototype.Pupop = Pupop;


## App.vue
methods:
   set()
       this.Pupop();
   

单继承：vue组件间的继承。——继承js的部分

只能继承js的部分。不能继承方法
可以继承原来的方法，重写方法。（装饰器）（混入）
通过配置项extends来完成继承
parent.js

<template>
    <div>
        <h2>parent</h2>
        <h3>parent- msg </h3>
    </div>
</template>

<script>
export default 
    data()
        return 
            msg:"title"
        
    ,
    methods:
        run()
           console.log(this.msg);
        
       

</script>

son.js

<template>
    <div>
        <h2>son</h2>
        <h3>son-msg</h3>
        <button @click="run">点我输出msg信息</button>
    </div>
</template>

<script>
import parent from './parent.vue'
export default 
    extends:parent,

</script>

---

异步组件加载

之前所有的组件导入都为同步导入。
异步导入写法。

export default 
    name:"app",
    components:
        // key标签名：函数 =》此函数返回一个primse，而import就作为函数来使用是返回了一个promise
        child:()=>import('@/components/child.vue'),
        // 异步会分包传输app,那么就可以自定义这个分包的包名
        child:()=>import(/*webpackChunkName:'children'*/'@/components/child.vue'),
    ,
 

异步组件工厂

//这种写法就是然函数返回一个对象。
const AsyncComponent = () => (
    // 需要加载的组件 (应该是一个 `Promise` 对象)
    component: import('./components/child.vue'),
    // 异步组件加载时使用的组件
    loading,
    // 加载失败时使用的组件
    // error: ErrorComponent,
    // 展示加载时组件的延时时间。默认值是 200 (毫秒)
    delay: 200,
    // 如果提供了超时时间且组件加载也超时了，
    // 则使用加载失败时使用的组件。默认值是：`Infinity`
    timeout: 3000
)

components: 
    child:AsyncComponent,
    loading
,

---

组件插槽

组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力

单个插槽/默认插槽/匿名插槽

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

<child>我是标题</child>
^^^^^^^^^^^^^^^^^^^^^^^^^
声明位置，用于在调用此组件为双标签时，中间内容显示的位置
单个插槽，一个组件只能有一个默认插槽
<slot name="default"></slot>
简写： <slot></slot>
写多个就是全部插入显示。
<slot>默认</slot>

具名插槽

有时我们需要多个插槽，来完成对应的数据自定义显示。
一个不带 name 的 出口会带有隐含的名字“default”。

具名插槽，给slot添加一个名称，名称不能重复
vue2.6之前的具名插槽，依次执行显示 都会显示
vue2.6之后的具名插槽，重复调用，只会执行最后1次

<slot name="header">默认头部</slot>

<child>
	<!-- vue2.6之前这样写 -->
	<div slot="handler">我是标题</div>
	
	<!-- vue2.6之后这样写 -->
	<template v-slot:handler>
		<div>我是标题</div>
	</template>
	
	<template #handler>简写
		<div>我是标题</div>
	</template>
</child>

作用域插槽

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素。在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
。

2.6只前的写法：
<button slot="del" @click="del(index)" slot-scope="index">删除</button>

2.6之后的写法：
<template #del="index">
    <button @click="del(index)">删除</button>
</template>

<div>
    <h1>app组件</h1>
    <hr>
    <child :users="users">
        <template #del="index">
            <button @click="del(index)">删除</button>
        </template>
    </child>
</div>

让插槽传参 作用域插槽 给插槽一个动态属性

<div>
    <h2>child组件</h2>
    <hr>
    <ul>
        <li v-for="(item,index) in users" :key="item.id">
            <span>item.name</span>
            <!-- 让插槽传参 作用域插槽 给插槽一个动态属性-->
            <slot name="del" :index="index">
                <span @click="del(index)">删除</span>
            </slot>
        </li>
    </ul>
</div>

插槽被替换后，所执行和修改的数据源对象也会发生改变。
那么执行的事件也就是替换的插件对象所在的数据源。
传递参数过去之后，会以属性名为key,属性值为value组合成一个对象。

动态插槽

以后补。