vue--6.slot插槽、组件中的自定义事件、网络请求、Sass和Less、单向数据流

最新推荐文章于 2024-05-09 20:47:18 发布

爱喝珍珠奶茶

最新推荐文章于 2024-05-09 20:47:18 发布

阅读量493

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_63774574/article/details/126728706

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.slot插槽

        语法:v-slot:插槽名

        语法糖:#插槽名

        没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot标签的尖括号中的数据

        插槽名不用使用引号引起来,直接写变量名

        插入的内容必须是template标签或者组件不能是原生的元素

设计组件里面:

        默认槽位:< slot> < /slot>

        具名槽位:< slot name="s1"> < /slot> < slot name="s2"> < /slot>

使用组件时:

        < 组件名> 尖括号中的东西插入默认槽位 < /组件名>

        < 组件名> < template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>

                        < template #s1>插入东西必须放这个标签中,老版本不用< template>

        < /组件名>

总结: v-slot:s2 是具名插槽的用法 #s1是插槽的语法糖

示例如下：

（1）主页的图片

（2）子页的图片

2.组件中的自定义事件

自定义事件在组件内部触发事件 this.$emit("事件名",参数1,参数2.....)

使用组件时绑定监听器,内部触发事件时监听器就会调用

示例如下：

主页面

子页面

3.网络请求

(3.1)自己配置

（1）组件中写入端口

（2）配置后端(重新创建一个文件夹并命名)：

                使用脚手架快速创建项目 npm init egg --type=simple

                npm i

                npm i --save egg-cors

                2.开启插件
                config/plugin.js文件
  cors:{
enable: true,
package: 'egg-cors',
                  }

                3.配置插件
                config/config.default.js文件
                config.cors = {
                  origin: '*',
                  allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
                  }

（3）在后端router.js和home.js文件里面去注册相应的端口

（4）配置8080服务的代理

vue.config.js文件:

         lintOnSave: false, //关闭eslint的严格模式检测,
        devServer: {
            port: 8080,

             proxy:{

                          '/hqyj': {

                                        target: 'http://192.168.101.109:7001',
                                       secure: true, //如果代理的target是https接口,需要配置它
                                        pathRewrite: {'^/hqyj': '/' },

                                }

                 }

        }

示例如下：

(3.2)baseURL

(1)组件的原型链上配置axios工具,并配置公共网址

main.js文件中:

        import axios from "axios"

        Vue.prototype.$axios=axios

        Vue.prototype.$axios.defaults.baseURL="http://ip:8080/api"

(2)配置8080服务的代理

vue.config.js文件:

         lintOnSave: false, //关闭eslint的严格模式检测,
        devServer: {
            port: 8080,

             proxy:{

                          '/hqyj': {

                                        target: 'http://192.168.101.109:7001',
                                       secure: true, //如果代理的target是https接口,需要配置它
                                        pathRewrite: {'^/hqyj': '/' },

                                }

                 }

        }

(3)组件中使用:

       this.$axios("/ajax1")

示例如下：图片是连续的

（1）

（2）

（3）