Vue中的Ajax 配置代理 slot插槽

这篇具有很好参考价值的文章主要介绍了Vue中的Ajax 配置代理 slot插槽。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

4.1.Vue脚手架配置代理

本案例需要下载axiosnpm install axios

配置参考文档Vue-Cli devServer.proxy

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 **JSON **的格式来写

4.1.1.方法一

vue.config.js中添加如下配置

module.exports = { 
devServer : { 
  proxy:"http://localhost:5000" 
  } 
}

说明

  1. 优点:配置简单,请求资源时直接发给前端(8080)即可
  2. 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
  3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,才会将请求会转发给服务器 (优先匹配前端资源)

4.1.2.方法二

编写vue.config.js配置具体代理规则

module.exports = {
  devServer: {
    proxy: {
      '/api1': {                            // 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',    // 代理目标的基础路径
        pathRewrite: {'^/api1':''},         // 代理往后端服务器的请求去掉 /api1 前缀
        ws: true,                           // 用于支持websocket,默认值为true
        changeOrigin: true                  // 用于控制请求头中的host值,默认值为true 
      },
      '/api2': {
        target: 'http://localhost:5001',
        pathRewrite: {'^/api2': ''},
        changeOrigin: true
      }
    }
  }
}

/**
 * changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
 * changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
 * changeOrigin默认值为true
 */

说明

  1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
  2. 缺点:配置略微繁琐,请求资源时必须加前缀

vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: './src/main.js'
    }
  },
  // 关闭语法检查
  lintOnSave: false,
  // 开启代理服务器 (方式一)
  // devServer: { 
  //   proxy:"http://localhost:5000" 
  // }
   
  // 开启代理服务器 (方式二)
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:5000',
        pathRewrite: {
          '^/api1': ''
        }
        // ws: true, //用于支持websocket,默认值为true
        // changeOrigin: true //用于控制请求头中的host值,默认值为true , 
      },
      '/api2': {
        target: 'http://localhost:5001',
        pathRewrite: {
          '^/api2': ''
        },
      }
    }
  }
}

src/App.vue

<template>
    <div>
        <button @click="getStudents">获取学生信息</button>
    </div>
</template> 

<script> 
    // 引入组件
    import axios from 'axios';
    export default { 
        name:'App',
        methods: {
            getStudents() {
                axios.get('http://localhost:8080/api1/students').then(
                    response => { 
                        console.log('请求成功了',response.data);
                    },
                    error => { 
                        console.log('请求失败了',error.message);
                    }
                )
            },
            getCars() {
                axios.get('http://localhost:8080/api2/cars').then(
                    response => { 
                        console.log('请求成功了',response.data); 
                    },
                    error => { 
                        console.log('请求失败了',error.message); 
                    }
                );
            }
        }
    }
</script>

Vue中的Ajax 配置代理 slot插槽

4.2.GitHub用户搜索案例

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE游览器的一个特殊配置,含义是让IE游览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <!-- 引入bootstrap样式 --> 
    <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">

    <!-- 配置网页的标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当游览器不支持js时noscript中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src/main.js

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this; // 安装全局事件总线
  }
})

src/App.vue

<template>
    <div class="container">
        <Search/>
        <List/>
    </div>
</template> 

<script> 
    // 引入组件
    import Search from './components/Search.vue';
    import List from './components/List.vue';

    export default {
        name:'App',
        components:{
            Search,
            List
        },
    }
</script>

src/components/Search.vue

<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    import axios from "axios";

    export default {
        name: "Search",
        data() {
            return {
                keyWord: ""
            };
        },
        methods: {
            searchUsers() {
                // 请求前更新List的数据
                this.$bus.$emit("updateListData", {
                    isLoading: true,
                    errMsg: "",
                    users: [],
                    isFirst: false,
                });
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    (response) => {
                        console.log("请求成功了");
                        // 请求成功后更新List的数据
                        this.$bus.$emit("updateListData", {
                            isLoading: false,
                            errMsg: "",
                            users: response.data.items
                        });
                    },
                    (error) => {
                        // 请求后更新List的数据
                        this.$bus.$emit("updateListData", {
                            isLoading: false,
                            errMsg: error.message,
                            users: []
                        });
                    }
                );
            }
        }
    }
</script>

src/components/List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div
                v-show="info.users.length"
                class="card"
                v-for="user in info.users"
                :key="user.login"
        >
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style="width: 100px" />
            </a>
            <p class="card-text">{{ user.login }}</p>
        </div>

        <!-- 展示欢迎词 -->
        <h1 v-show="info.isFirst">欢迎使用!</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中....</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{ info.errMsg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "List",
        data() {
            return {
                info: {
                    isFirst: true,
                    isLoading: false,
                    errMsg: "",
                    users: [],
                }
            }
        },
        mounted() {
            this.$bus.$on("updateListData", (dataObj) => {
                    this.info = { ...this.info, ...dataObj };
                }
            );
        }
    }
</script>

<style scoped>
    album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }
    .card {
        float: left;
        width: 33.333%;
        padding: 0.75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }
    .card > img {
        margin-bottom: 0.75rem;
        border-radius: 100px;
    }
    .card-text {
        font-size: 85%;
    }
</style>

Vue中的Ajax 配置代理 slot插槽

4.3.vue-resource

vue项目常用的两个Ajax

  1. axios:通用的Ajax请求库,官方推荐,效率高
  2. vue-resource:vue插件库,vue 1.x使用广泛,官方已不维护

下载vue-resourcenpm i vue-resource

src/main.js

import Vue from 'vue';
import App from './App.vue';
import vueResource from 'vue-resource';

Vue.config.productionTip = false;

Vue.use(vueResource);

new Vue({
  el: '#app',
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this; // 安装全局事件总线
  }
})

src/App.vue

<template>
    <div class="container">
        <Search/>
        <List/>
    </div>
</template> 

<script> 
    // 引入组件
    import Search from './components/Search.vue';
    import List from './components/List.vue';

    export default {
        name:'App',
        components:{
            Search,
            List
        },
    }
</script>

src/components/Search.vue

<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                keyWord: ""
            };
        },
        methods: {
            searchUsers() {
                // 请求前更新List的数据
                this.$bus.$emit("updateListData", {
                    isLoading: true,
                    errMsg: "",
                    users: [],
                    isFirst: false,
                });
                this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    (response) => {
                        console.log("请求成功了");
                        // 请求成功后更新List的数据
                        this.$bus.$emit("updateListData", {
                            isLoading: false,
                            errMsg: "",
                            users: response.data.items
                        });
                    },
                    (error) => {
                        // 请求后更新List的数据
                        this.$bus.$emit("updateListData", {
                            isLoading: false,
                            errMsg: error.message,
                            users: []
                        });
                    }
                );
            }
        }
    }
</script>

src/components/List.vue

<template>
    <div class="row">
        <!-- 展示用户列表 -->
        <div
                v-show="info.users.length"
                class="card"
                v-for="user in info.users"
                :key="user.login"
        >
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style="width: 100px" />
            </a>
            <p class="card-text">{{ user.login }}</p>
        </div>

        <!-- 展示欢迎词 -->
        <h1 v-show="info.isFirst">欢迎使用!</h1>
        <!-- 展示加载中 -->
        <h1 v-show="info.isLoading">加载中....</h1>
        <!-- 展示错误信息 -->
        <h1 v-show="info.errMsg">{{ info.errMsg }}</h1>
    </div>
</template>

<script>
    export default {
        name: "List",
        data() {
            return {
                info: {
                    isFirst: true,
                    isLoading: false,
                    errMsg: "",
                    users: [],
                }
            }
        },
        mounted() {
            this.$bus.$on("updateListData", (dataObj) => {
                    this.info = { ...this.info, ...dataObj };
                }
            );
        }
    }
</script>

<style scoped>
    album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }
    .card {
        float: left;
        width: 33.333%;
        padding: 0.75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }
    .card > img {
        margin-bottom: 0.75rem;
        border-radius: 100px;
    }
    .card-text {
        font-size: 85%;
    }
</style>

4.4.slot 插槽

<slot>插槽:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件

  1. 分类:默认插槽、具名插槽、作用域插槽
  2. 使用方式
    1. 默认插槽

      父组件中: 
        <Category> 
          <div>html结构1</div> 
        </Category> 
      子组件中:Category 
        <template> 
          <div> 
            <!-- 定义插槽 --> 
            <slot>插槽默认内容...</slot> 
          </div> 
        </template>
      
    2. 具名插槽,父组件指明放入子组件的哪个插槽slot=“footer”,如果是template可以写成v-slot:footer

      父组件中: 
        <Category> 
          <template slot="center"> 
            <div>html结构1</div> 
          </template> 
          
          <template v-slot:footer>
            <div>html结构2</div> 
          </template> 
        </Category>
      子组件中: 
        <template> 
          <div> 
            <!-- 定义插槽 --> 
            <slot name="center">插槽默认内容...</slot> 
            <slot name="footer">插槽默认内容...</slot> 
          </div> 
        </template>
      
    3. 作用域插槽,scope用于父组件往子组件插槽放的html结构接收子组件的数据;理解数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

      注意:关于样式,既可以写在父组件中,解析后放入子组件插槽;也可以放在子组件中,传给子组件再解析

      父组件中: 
        <Category> 
          <template scope="scopeData"> 
            <!-- 生成的是ul列表 --> 
            <ul> 
              <li v-for="g in scopeData.games" :key="g">{{g}}</li> 
            </ul> 
          </template>
          
        <Category> 
          <template slot-scope="scopeData"> 
          <!-- 生成的是h4标题 --> 
          <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> 
          </template> 
        </Category>
      子组件中:
        <template> 
          <div> 
            <slot :games="games"></slot> 
          </div> 
        </template>
        
        <script> 
          export default { 
            name:'Category', props:['title'], 
            //数据在子组件自身 
            data() { 
              return { 
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'] 
              } 
            },
          } 
        </script>
      

4.4.1.默认插槽

src/App.vue

<template>
    <div class="container">
        <Category title="美食">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        
        <Category title="游戏">
            <ul>
                <li v-for="(item, index) in games" :key="index">{{item}}</li>
            </ul>
        </Category>
        
        <Category title="电影">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </Category>
    </div>
</template> 

<script> 
    // 引入组件
    import Category from './components/Category.vue';

    export default {
        name:'App',
        components:{
            Category
        },
        data() {
            return {
                foods: ['火锅','烧烤','小龙虾','牛排'],
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']
            }
        }
    }
</script>

<style>
    .container {
        display: flex;justify-content: space-around;
    }
</style>

src/components/Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
        <slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props:['title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
    img {
        width: 100%;
    }
</style>

Vue中的Ajax 配置代理 slot插槽

4.4.2.具名插槽

src/App.vue

<template>
    <div class="container">
        <Category title="美食">
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" >
            <a slot="footer" href="http://www.atguigu.com">更多美食</a>
        </Category>
        
        <Category title="游戏">
            <ul slot="center">
                <li v-for="(item, index) in games" :key="index">{{item}}</li>
            </ul>
            <div class="foot" slot="footer">
                <a href="http://www.atguigu.com">单机游戏</a> 
                <a href="http://www.atguigu.com">网络游戏</a>
            </div>
        </Category>
        
        <Category title="电影">
            <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
            <template v-slot:footer>
                <div class="foot">
                    <a href="http://www.atguigu.com">经典</a> 
                    <a href="http://www.atguigu.com">热门</a> 
                    <a href="http://www.atguigu.com">推荐</a>
                </div>
                <h4>欢迎前来观影</h4>
            </template>
        </Category>
    </div>
</template> 

<script> 
    // 引入组件
    import Category from './components/Category.vue';

    export default {
        name:'App',
        components:{
            Category
        },
        data() {
            return {
                foods: ['火锅','烧烤','小龙虾','牛排'],
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']
            }
        }
    }
</script>

<style>
    .container,.foot {
        display: flex;justify-content: space-around;
    }
    h4{text-align: center;}
</style>

src/components/Category.vue

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
        <slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot>
        <slot name="footer">我是一些默认值,当使用者没有传递具体结构时,我会出现2</slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props:['title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
    img {
        width: 100%;
    }
</style>

Vue中的Ajax 配置代理 slot插槽

4.4.3.作用域插槽

src/App.vue

<template>
    <div class="container">
        <Category title="游戏">
            <template scope="liqb">
                <ul>
                    <li v-for="(item, index) in liqb.games" :key="index">{{item}}</li>
                </ul>
            </template>
        </Category>

        <Category title="游戏">
            <template scope="{games}">
                <ol>
                    <li style="color:red" v-for="(item, index) in games" :key="index">{{item}}</li>
                </ol>
            </template>
        </Category>
        
        <Category title="游戏">
            <template slot-scope="{games}">
                <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
            </template>
        </Category>
    </div>
</template> 

<script> 
    // 引入组件
    import Category from './components/Category.vue';

    export default {
        name:'App',
        components:{
            Category
        }
    }
</script>

<style>
    .container,.foot {
        display: flex;justify-content: space-around;
    }
    h4{text-align: center;}
</style>

src/components/Category.vue文章来源地址https://www.toymoban.com/news/detail-486219.html

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot :games="games" msg="hello">我是默认的一些内容</slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props:['title'],
        data() {
            return {
                games: ['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        }
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }
    h3 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
    img {
        width: 100%;
    }
</style>

到了这里,关于Vue中的Ajax 配置代理 slot插槽的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 3 中的插槽(Slots)用法

    插槽(Slots)是 Vue 组件中一种非常有用的功能,用于在父组件中向子组件传递内容。Vue 3 引入了 script setup 语法,使得组件的写法更加简洁和易读。在本篇博客中,我们将探讨在 Vue 3 中使用插槽的不同方式,包括默认插槽、具名插槽以及作用域插槽。 默认插槽是 Vue 组件中最

    2024年02月15日
    浏览(37)
  • Vue中的脚手架和路由

    许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 前端系列文章——传送门 后端系列文章——传送门 概念 脚手架是为了更加快速的架构整个项目的结构和基础业务,开发

    2024年02月04日
    浏览(73)
  • Vue2-配置脚手架、分析脚手架、render函数、ref属性、props配置项、mixin配置项、scoped样式、插件

    🥔:总有一段付出了没有回报的日子 是在扎根 更多Vue知识请点击——Vue.js Vue CLI(Vue Command Line Interface)Vue脚手架,Vue官方提供的标准化开发工具(开发平台) 安装node.js——可以查看此教程 第一步:输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站,全局安装

    2024年02月12日
    浏览(68)
  • Vue 脚手架(打包工具)的理解 - 配置文件理解

    Vue 脚手架是 Vue 作为一个前端开发项目的最核心点,将 JavaScript 、 CSS 、 HTML 这几种前端自动整合,极大的简化了前端开发工作。 没有 Vue 脚手架,就没有 Vue ,这是一定的,Java 语言和C语言都需要编译,那么你可以将 Vue 脚手架看作是伪编译器吧,或者是伪解释器,当然伪解

    2024年02月06日
    浏览(44)
  • 在Vue 3中,对于组件中的插槽(slots)生成进行了优化,以提高渲染性能和组件的更新速度。

    在Vue 3中,对于组件中的插槽(slots)生成进行了优化,以提高渲染性能和组件的更新速度。 在Vue 2中,每当一个插槽被渲染时,都会生成一个函数来创建对应的VNode节点。这意味着即使插槽内容保持不变,每次渲染时仍然会重新生成相同的VNode节点。 而在Vue 3中,通过使用新

    2024年02月12日
    浏览(49)
  • Vue-插槽(Slots)

    在Vue.js中,插槽是一种强大的功能,它允许你创建可重用的模板,并在使用该模板的多个地方插入自定义内容。 插槽为你提供了一种方式,可以在父组件中定义一些“插槽”,然后在子组件中使用这些插槽,插入自己的内容。 2.1 默认插槽(Default Slots) 这是最常见的插槽类

    2024年01月22日
    浏览(39)
  • Vue插槽 slot 标签

    Vue 插槽 slot 标签: 作用:让父组件可以向子组件指定的位置插入一段 html 结构,也属于一种组件之间的通信方式,适用于父传子  不使用插槽: 创建 List 组件,接收父元素传递的数据,用于显示分类列表。 在 Home 页面中引用 List 组件,并传递对应的数据。 注 :组件会根据

    2024年02月11日
    浏览(40)
  • Vue slot 插槽使用详解

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月16日
    浏览(44)
  • Webpack项目学习:Vue-cli(脚手架)-优化配置 -ui库element-plus+减小打包体积 -按需加载+自定义主题+优化

    安装 全部引入,在入口文件main.js  启动:npm start  按需引入 需要插件快速开始 | Element Plus (gitee.io)     更改默认配置 主题 | Element Plus (gitee.io)    如果有模块没有安装 ,安装一下即可 优化 关闭性能分析 文件单独打包 做缓存-

    2024年02月08日
    浏览(72)
  • vue知识点————插槽 slot

    slot 插槽 在父组件中引用的子组件 在父组件中写入百度 可在子组件slot插槽中展示出 父组件 子组件 父组件 子组件 这里父组件可以访问父组件的数据并且可在slot中展示到,不可以在父组件中访问子组件的数据,就相当于父组件百度—{{ user.name }}{{ url }} 这里的url是访问不到的

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包