From f868fec5f748f0f44d89c81cb306107714db300d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=98=B1?= <1954960364@qq.com>
Date: Sun, 16 Apr 2023 12:51:45 +0000
Subject: [PATCH] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 李昱 <1954960364@qq.com>
---
 .../2023-04-10-v-model.md"                    | 222 ++++++++++++++
 ...1-\344\277\256\351\245\260\347\254\246.md" | 128 ++++++++
 ...50\345\222\214\346\250\241\346\235\277.md" | 270 +++++++++++++++++
 .../2023-04-14-\347\273\204\344\273\266.md"   | 277 ++++++++++++++++++
 4 files changed, 897 insertions(+)
 create mode 100644 "14\346\235\216\346\230\261/2023-04-10-v-model.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-04-11-\344\277\256\351\245\260\347\254\246.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-04-13-\344\276\246\345\220\254\345\231\250\345\222\214\346\250\241\346\235\277.md"
 create mode 100644 "14\346\235\216\346\230\261/2023-04-14-\347\273\204\344\273\266.md"

diff --git "a/14\346\235\216\346\230\261/2023-04-10-v-model.md" "b/14\346\235\216\346\230\261/2023-04-10-v-model.md"
new file mode 100644
index 0000000..eb25e0c
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-04-10-v-model.md"
@@ -0,0 +1,222 @@
+
+#
+## 一.v-model
+
++ v-model 可以自动将表单输入框的内容同步给 JavaScript 中相应的变量
+
++ v-model 还可以用于各种不同类型的输入，它会根据所使用的元素**自动**使用对应的 DOM 属性和事件组合
+
++ v-model 会忽略任何表单元素上**初始的** value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。应该在 JavaScript 中使用data 选项来声明该初始值。
+
+### 代码:
+```html
+<!-- <script setup> 组合式-->
+<script>
+
+export default{
+    data(){
+      return {
+        mess:'',
+      }
+    },
+}
+
+</script>
+
+<template>
+  <div>
+    <!-- v-model：表单的绑定传值 -->
+    <input type="text" v-model="mess">
+    {{mess}}
+  </div>
+
+</template>
+```
+#
+## 二.绑定
+
++ 文本框:
+```html
+    <td><input type="text" v-model="obj.name"></td>
+```
+
++ 单选框:type中为 radio
+```html
+    <input type="radio" name="sex" value="f" v-model="obj.sex">女
+    <input type="radio" name="sex" value="m" v-model="obj.sex">男
+```
+
++ 复选框:type中为 checkbox
+```html
+    <input type="checkbox" name="hobby" value="篮球" v-model="obj.hobby">篮球
+    <input type="checkbox" name="hobby" value="吃饭" v-model="obj.hobby">吃饭
+```
+
++ 下拉框:包在**select 标签**中的**option 标签**，提供一个 **disabled 虚化禁用**掉对应的option 标签选项，可用于下拉框的顶部提示
+```html
+    <label for="">省: </label>
+        <select v-model="obj.province.proname">
+            <option value="" disabled>请选择省份</option>
+            <template v-for="item of pro">
+              <option :value="item">{{item}}</option>
+            </template>
+        </select>
+```
+
+#
+## 三.代码
+```html
+<!-- js -->
+<script>
+  export default{
+    data(){
+      return{
+        obj:{
+          name:'',
+          age:'',
+          sex:'f',//性别
+          hobby:[],
+          province:
+            {
+              proname:'',
+              city:'',
+              counties:''
+            },
+        },
+        //省
+        pro:[
+          '福建省','山东省','广东省'
+        ],
+        //省与市
+        arr:[
+          {
+            proname:'福建省',
+            city:['泉州市','龙岩市']
+          },
+          {
+            proname:'山东省',
+            city:['济南市','青岛市']
+          },
+          {
+            proname:'广东省',
+            city:['深圳市','广州市']
+          }
+        ],
+
+        //市与县区
+        count:[
+          {
+            city:'泉州市',
+            counties:['鲤城区','丰泽区','晋江市']
+          },{
+            city:'龙岩市',
+            counties:['新罗区','永定区','长汀县']
+          },{
+            city:'济南市',
+            counties:['历下区','历城区','济阳区']
+          },{
+            city:'青岛市',
+            counties:['城阳区','市南区','市北区']
+          },{
+            city:'深圳市',
+            counties:['龙华区','宝安区','光明区']
+          },{
+            city:'广州市',
+            counties:['天河区','海珠区','黄埔区']
+          }
+        ]
+      }
+    },
+    methods:{
+      but(){
+        console.log(this.obj)
+      },
+
+      vif(item,name){ 
+        if(item===name){
+          return true
+        }
+        
+      }
+    }
+  }
+</script>
+
+<!-- html -->
+<template>
+  <form>
+    <table>
+      <tr>
+        <td><label for="">姓名</label></td>
+        <td><input type="text" v-model="obj.name"></td>
+      </tr>
+
+      <tr>
+        <td><label for="">年龄</label></td>
+        <td><input type="text" v-model="obj.age"></td>
+      </tr>
+
+      <!-- 单选：radio -->
+      <tr>
+        <td><label for="">性别</label></td>
+        <td>
+          <input type="radio" name="sex" value="f" v-model="obj.sex">女
+          <input type="radio" name="sex" value="m" v-model="obj.sex">男
+        </td>
+      </tr>
+
+      <!-- 复选：checkbox -->
+      <tr>
+        <td><label for="">爱好:</label></td>
+        <td>
+          <input type="checkbox" name="hobby" value="篮球" v-model="obj.hobby">篮球
+          <input type="checkbox" name="hobby" value="吃饭" v-model="obj.hobby">吃饭
+          <input type="checkbox" name="hobby" value="睡觉" v-model="obj.hobby">睡觉
+          <input type="checkbox" name="hobby" value="足球" v-model="obj.hobby">足球
+        </td>
+      </tr>
+
+      <!-- 下拉框: select 
+            默认:disabled
+      -->
+      <tr>
+        <td><label for="">户籍</label></td>
+        <td>
+          <!-- 找到对应的省份，绑定到下拉框 -->
+          <label for="">省: </label>
+          <select v-model="obj.province.proname">
+            <option value="" disabled>请选择省份</option>
+            <template v-for="item of pro">
+              <option :value="item">{{item}}</option>
+            </template>
+          </select>
+          
+          <!-- 根据选择的省份，找到对应的市进行下拉框绑定 -->
+          <label for="">市: </label>
+          <select v-model="obj.province.city">
+            <option value="" disabled>请选择市</option>
+            <template v-for="item of arr">
+              <template v-if="vif(item.proname,obj.province.proname)">
+                <option v-for="city of item.city" :value="city">{{city}}</option>
+              </template>
+            </template>
+          </select>
+
+          <!-- 根据选择的市，找到对应的县区进行下拉框的绑定 -->
+          <label for="">县区: </label>
+          <select v-model="obj.province.counties">
+            <option value="" disabled>请选择县区</option>
+            <template v-for="item of count">
+              <template v-if="vif(item.city,obj.province.city)">
+                <option v-for="counties of item.counties" :value="counties">{{counties}}</option>
+              </template>
+            </template>
+          </select>
+        </td>
+      </tr>
+
+    </table>
+    <input type="button" value="提交" @click="but">
+  </form>
+</template>
+```
diff --git "a/14\346\235\216\346\230\261/2023-04-11-\344\277\256\351\245\260\347\254\246.md" "b/14\346\235\216\346\230\261/2023-04-11-\344\277\256\351\245\260\347\254\246.md"
new file mode 100644
index 0000000..3251d21
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-04-11-\344\277\256\351\245\260\347\254\246.md"
@@ -0,0 +1,128 @@
+# 表单绑定修饰符和生命周期钩子
+
+## 一.表单绑定修饰符
+
+### .lazy 
+
++ 默认情况下，v-model 会在每次 input 事件后实时同步更新数据 (IME 拼字阶段的状态例外也就是输入法打字时例外)
+
++ 加 lazy 修饰符来改为在每次 change 事件后更新数据，也就是焦点不在对于的事件上时更新，不实时同步更新
+
+```html
+<!-- js -->
+<script>
+export default{
+    data(){
+        return{
+            mod:'',
+            mod1:'',
+        }
+    },
+}
+</script>
+
+<!-- html -->
+<template>
+    <div>
+        <!-- v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外（输入法使用时）)。 -->
+        <input type="text" v-model="mod">
+        {{ mod }}
+    </div>
+    <div>
+        <!-- 添加修饰符 lazy:必须焦点离开，数据才会更新 -->
+        <input type="text" v-model.lazy="mod1">
+        {{ mod1 }}
+    </div>
+</template>
+```
+
+### .reim
+
++ 默认自动去除用户输入内容的前后两端的空格
+```html
+<!-- js -->
+<script>
+export default{
+    data(){
+        return{
+            arr:''
+        }
+    },
+}
+</script>
+
+<!-- html -->
+<template>
+
+    <div>
+        <!-- 默认自动去除用户输入内容中前后两端的空格 -->
+        <input type="text" v-model.trim="arr">
+        {{ arr }}
+    </div>
+</template>
+```
+
+#
+## 二. 生命周期钩子
+```
+每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
+```
+
+### mounted ：在选项式中
++ mounted 钩子可以用来在创建的所有 DOM 节点和组件完成初始渲染后运行代码
+
++ 周期钩子最常用的是 **mounted**、updated 和 unmounted。
+
++ 有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。
+
+```html
+<!-- js -->
+<script>
+export default{
+    data(){
+        return{
+
+        }
+    },
+    mounted(){
+        console.log('渲染成功')
+       setTimeout(() => {
+        console.log('限时显示渲染成功')
+       }, 2000);
+    }
+}
+</script>
+
+<!-- html -->
+<template>
+    <p>1111</p>
+</template>
+```
+
+### onMounted ：在组合式中
+
++ 周期钩子最常用的是 **onMounted**、onUpdated 和 onUnmounted。
+
++ 对 onMounted 的调用**不一定**要放在 setup() 或 <script setup> 内的词法上下文中
+
++ onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。
+
+```html
+<!-- 组合式 -->
+<script setup>
+
+import {onMounted} from 'vue'
+
+onMounted(()=>{
+    console.log('组件和DOM节点全部渲染成功')
+
+    setTimeout(() => {
+        console.log('延时成功')
+    }, 2000);
+})
+</script>
+
+<template>
+    <p>敲代码了</p>
+</template>
+```
\ No newline at end of file
diff --git "a/14\346\235\216\346\230\261/2023-04-13-\344\276\246\345\220\254\345\231\250\345\222\214\346\250\241\346\235\277.md" "b/14\346\235\216\346\230\261/2023-04-13-\344\276\246\345\220\254\345\231\250\345\222\214\346\250\241\346\235\277.md"
new file mode 100644
index 0000000..2b57e77
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-04-13-\344\276\246\345\220\254\345\231\250\345\222\214\346\250\241\346\235\277.md"
@@ -0,0 +1,270 @@
+# 侦听器和模板引用
+
+## 一.watch函数 :侦听器
+
+### 介绍:
+
++ 使用 watch 函数在每次响应式状态发生变化时触发回调函数
+
++ 能直接侦听响应式对象的属性值，需要用一个返回该属性的**函数**
+```js
+const obj = reactive({ count: 0 })
+// 提供一个 getter 函数
+watch(
+  () => obj.count,
+  (count) => {
+    console.log(`count is: ${count}`)
+  }
+)
+```
+### 基础的内容:
+
++ 组合式
+```html
+<!-- 组合式 -->
+<script setup>
+import {ref,watch} from 'vue'
+import axios from 'axios'
+
+const question=ref('')
+const name =ref('')
+const imgUrl =ref('')
+
+//定义侦听器(侦听的数据,匿名方法操作)
+watch(question, async (newValue,oldValue)=>{
+  //newValue:现在的值,oldValue：过去的值)
+  // console.log(newValue)
+  // console.log(oldValue)
+
+  //判断现在的值里有没有要的字符
+  if(newValue.endsWith('熊') || newValue.endsWith('?')){
+    name.value='正在查找相关信息，请稍等'
+    console.log('开始查找')
+
+    // 使用axios查看路由
+    axios.get('http://localhost:3030/roles').then(res =>{
+
+      //get暴露出来的
+        console.log(res)
+
+        let data=res.data.data;
+
+        name.value=data.name
+        imgUrl.value=data.img
+    })
+  }
+})
+</script>
+
+<template>
+  <div>
+    请输入问题:
+    <input type="text" v-model="question">
+  </div>
+  <div>
+    答案：{{ name }}
+  </div>
+  <div>
+    <img :src="imgUrl" alt="">
+  </div>
+</template>
+```
+
++ 选项式
+```html
+<script>
+import axios from 'axios'
+
+export default{
+    data(){
+        //定义数据
+        return{
+            question:'',
+            name:'',
+            imgUrl:''
+        }
+    },
+    //侦听器
+    watch:{
+        
+        //侦听的数据方法
+        // 每当 question 改变时，这个函数就会执行
+        question(newValue,locValue){
+            //判断是否有？,有？时执行
+            if(newValue.endsWith('?')){
+                //引入数据操作的异步方法
+                this.getAll()
+            }
+        }
+    },
+    methods:{
+        //异步函数方法
+        async getAll(){
+            this.name='正在查找答案，请稍等'
+
+            //axios的路由方式
+            axios.get('http://localhost:3030/roles').then(res=>{
+                console.log('运行中')
+                console.log(res)
+
+                let data=res.data.data
+
+                this.name=data.name
+                this.imgUrl=data.img
+            })
+        }
+    }
+
+}
+</script>
+
+<template>
+    <div>
+        问题:
+        <input type="text" v-model="question">
+    </div>
+    <div>
+        回答:
+        {{ name }}
+    </div>
+    <div>
+        <img :src="imgUrl" alt="">
+    </div>
+</template>
+```
+
++ 启动前后端分离，修改的代码
+```js
+async function getAll(ctx,next){
+    // 随机生成一个整数范围在0~9
+    let i=Math.floor(Math.random()*10)
+    let res;
+    if(i>5){
+        res={
+            code:1000,
+            data:{
+                name:'找到北极熊了',
+                img:'https://img1.baidu.com/it/u=3904465785,574612916&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
+            },
+            msg:'获取成功'
+        }
+    }else{
+        res={
+            code:1000,
+            data:{
+                name:'没找到北极熊',
+                img:'https://img1.baidu.com/it/u=1067723405,2531657160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=586'
+            },
+            msg:'获取失败'
+        }
+    }
+    ctx.body=res
+}
+```
+#
+## 二.ref: 模板引用
+
+### 介绍
+
++ ref 是一个特殊的 attribute，它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。
+
++ 只可以在组件挂载后才能访问模板引用。如果你想在模板中的表达式上访问 input，在初次渲染时会是 null。这是因为在初次渲染前这个元素还不存在
+
++ ref 数组并不保证与原始的数组有相同的顺序
+
+### 基础的操作
+
++ 组合式
+```html
+<script setup>
+
+import {ref, onMounted} from 'vue'
+
+const div =ref(null)
+
+//定义一个数组
+const list=ref([1,2,3])
+const items=ref([])
+
+onMounted(()=>{
+    console.log(div.value)
+    console.log(items.value)
+
+    //遍历元素被挂载后包含对应整个列表的所有元素
+    items.value.forEach((i)=>{
+        i.textContent
+        console.log(i.textContent)
+        
+    })
+})
+</script>
+
+<template>
+    <div ref="div">
+        <h1>睡觉了</h1>
+    </div>
+
+    <div>
+        <ul>
+            <!-- 循环数组 -->
+            <li v-for="item of list" ref="items">
+                {{ item }}
+            </li>
+            
+        </ul>
+    </div>
+</template>
+```
+
++ 选项式
+```html
+<script>
+export default{
+  data(){
+    return{
+      name:'',
+      paw:'',
+    }
+  },
+
+  //生命周期，初始渲染
+  mounted(){
+    console.log(this.$refs.div)
+  },
+
+  methods:{
+    
+    names(){
+      this.name=this.$refs.name
+      this.name.style="color : red"
+      this.name.className='name'
+      //focus()点击完按钮后，焦点会自动跳转到控件
+      this.name.focus()
+    },
+
+    pawws(){
+      this.paw=this.$refs.paw
+      this.paw.style="color : red"
+      this.paw.className='name'
+      //focus()点击完按钮后，焦点会自动跳转到控件
+      this.paw.focus()
+    }
+  }
+}
+
+</script>
+
+<template>
+  <div ref="div">
+    <h1>结束了</h1>
+  </div>
+  <div>
+    姓名: <input type="text" ref="name" >
+  <input type="button" value="点击点击" @click="names">
+  </div>
+  <div>
+    密码: <input type="text" ref="paw" >
+  <input type="button" value="点击点击" @click="pawws">
+  </div>
+</template>
+```
diff --git "a/14\346\235\216\346\230\261/2023-04-14-\347\273\204\344\273\266.md" "b/14\346\235\216\346\230\261/2023-04-14-\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..e2a8afe
--- /dev/null
+++ "b/14\346\235\216\346\230\261/2023-04-14-\347\273\204\344\273\266.md"
@@ -0,0 +1,277 @@
+
+#
+## 一.组件的使用 :两种是因为API的不同，所有写法不同
+
++ 组合式(组合式的API)
+```html
+<!-- 组合式 -->
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import DefineProps from './components/DefineProps.vue';
+</script>
+
+<template>
+  <HelloWorld />
+  <DefineProps/>
+</template>
+```
+
++ 选项式(选项式式的API):
+
+    + 要将导入的组件暴露给模板，我们需要在 components 选项上注册它。
+
+    + 这个组件将会以其注册时的名字作为模板中的标签名。
+
+```html
+<!-- 选项式 -->
+<script>
+//导入子组件，但是要注册，才能将导入的组件暴露给模板
+import HelloWorld from './components/HelloWorld.vue';
+import DefineProps from './components/DefineProps.vue';
+
+export default{
+  //注册导入的子组件
+  components:{
+    HelloWorld,DefineProps
+  },
+}
+</script>
+
+<template>
+  <HelloWorld />
+  <DefineProps/>
+</template>
+```
+
+### 传递 props
+
++ Props 是一种特别的 attributes，你可以在组件上声明注册。
+
++ defineProps :组合式
+
+    + HelloWorld.vue
+    ```html
+    <template>
+        <h1>{{ xx }}</h1>
+        <h3 v-if="id">第 {{ id }} 个选择: {{ name }}</h3>
+    </template>
+
+    <script setup>
+
+    defineProps(['xx','id','name'])
+    </script>
+    ```
+
+    + App.vue
+    ```html
+    <!-- 组合式 -->
+    <script setup>
+    import HelloWorld from './components/HelloWorld.vue'
+    import DefineProps from './components/DefineProps.vue';
+
+    const add=[
+    {id:'1',name:'炸鸡'},
+    {id:'2',name:'猪脚饭'},
+    {id:'3',name:'炒饭'},
+    {id:'4',name:'炒面'},
+    ]
+    </script>
+    <template>
+    <HelloWorld xx="吃饭了，饿了"/>
+    <HelloWorld v-for="item of add" :key="item.id" :id="item.id" :name="item.name"/>
+    </template>
+    ```
++ props: 选项式:
+    
+    +  当一个值被传递给 prop 时，它将成为该组件实例上的一个属性。该属性的值可以像其他组件属性一样，在模板和组件的 this 上下文中访问。
+
+    + 一个组件可以有任意多的 props，默认情况下，所有 prop 都接受任意类型的值。
+
++ 代码
+
+    + DefineProps.vue
+    ```html
+    <template>
+    <h1>{{ xx }}</h1>
+    
+    <!-- 当id为空时，这个标签内容不显示 -->
+    <h3 v-if="id">第{{id}}选择:{{ name }}</h3>
+    </template>
+
+    <script>
+    export default{
+    data(){
+        return{
+
+        }
+    },
+    props:['xx','name','id']
+    }
+    </script>
+    ```
+
+    + App.vue
+    ```html
+    <!-- 组合式 -->
+    <script setup>
+    import HelloWorld from './components/HelloWorld.vue'
+    import DefineProps from './components/DefineProps.vue';
+
+    const add=[
+    {id:'1',name:'炸鸡'},
+    {id:'2',name:'猪脚饭'},
+    {id:'3',name:'炒饭'},
+    {id:'4',name:'炒面'},
+    ]
+    </script>
+
+    <template>
+    <DefineProps xx="点饭了，点什么?"/>
+    <DefineProps v-for="item of add" :key="item.id" :id="item.id" :name="item.name"/>
+    </template>
+    ```
+
+#
+## 二.监听事件
+
++ 调用内置的 $emit 方法，通过传入事件名称来抛出一个事件
+
+```html
+<template>
+ <h1>{{name}}</h1>
+ <input type="button" value="变大" @click="$emit('bianda')" >
+ <input type="button" value="变小" @click="$emit('xiao')" >
+</template>
+
+```
+
+### 选项式
+
++ 通过 emits 选项来声明需要抛出的事件
+
+```html
+<!-- HelloWorld -->
+<script>
+export default {
+  props: ['name'],
+  emits: ['bianda' ,'xiao']
+}
+</script>
+<template>
+ <h1>{{name}}</h1>
+ <input type="button" value="变大" @click="$emit('bianda')" >
+ <input type="button" value="变小" @click="$emit('xiao')" >
+</template>
+
+<!-- App.vue -->
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default{
+  components:{
+    HelloWorld
+  },
+  data(){
+      return{
+        x:1
+      }
+  },
+  methods:{
+    bianda(){
+        this.x+=1;
+    },
+    xiao(){
+      this.x-=1;
+    }
+  }
+}
+</script>
+
+<template>
+  <div :style="{fontSize: x + 'em'}">
+    <HelloWorld @bianda="bianda" name="睡觉" @bianxiao="xiao"/>
+  </div>
+</template>
+```
+
+### 组合式
+
++ 通过 defineEmits 宏来声明需要抛出的事件
+
+```html
+<!--  HelloWorld -->
+<script setup>
+  defineProps(['name'])
+  defineEmits(['bianda'])
+</script>
+
+<template>
+ <h1>{{name}}</h1>
+ <input type="button" value="变大" @click="$emit('bianda')" >
+ <input type="button" value="变小" @click="$emit('xiao')" >
+</template>
+
+
+<!-- App.vue -->
+
+<!-- 组合式 -->
+<script setup>
+
+import HelloWorld from './components/HelloWorld.vue';
+
+import {ref} from 'vue'
+
+const x=ref(1)
+console.log(x.value)
+
+function bianda(){
+  x.value+=1;
+}
+
+function xiao(){
+  x.value-=1;
+}
+
+</script>
+
+
+<template>
+  <div :style="{fontSize: x + 'em'}">
+    <HelloWorld @bianda="bianda" name="睡觉" @xiao="xiao"/>
+  </div>
+</template>
+```
+
+## 三.<slot> 元素 :通过插槽输入内容
+
++ <slot> 元素来实现向组件传递内容
+
++ 使用 <slot> 作为一个占位符，父组件传递进来的内容就会渲染在这里
+
+```html
+<!-- Slot.vue -->
+<template>
+    <div>
+        <h1>
+            <slot/>
+        </h1>
+    </div>
+</template>
+
+<!-- App.vue -->
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import Slot from './components/Slot.vue'
+
+export default{
+  components:{
+    HelloWorld,Slot
+  },
+}
+</script>
+
+<template>
+  <Slot>星系</Slot>
+</template>
+```
-- 
Gitee