VUE父级使用子组件以插槽的形式,在父级修改内容任意向子级插入

el/2023/9/24 22:13:32

**父级组件的写法:**
子组件是firstSon
<template>
   <div>
        <first-son>
            //向子组件中插入此内容
            <div slot="firstcontent"></div>
         </first-son>
        
    </div>
</template>


<script>
   import firstSon from '/firstSon'
   export default(){
        components:{
           firstSon
        }
  }
</script>

子组件写:
<template>
    <div>
       <slot name="firstcontent">
          即可展示其内容,这个里面的内容是需要更换的内容,更换那块内容,用slot包住即可
          </slot>
     </div>

</template>
 


http://www.ngui.cc/el/3419159.html

相关文章

Map转成JSON对象

实际场景&#xff1a; 后端接口需要你传的参数是以上类型&#xff0c;由于是答题的场景&#xff0c;每次点击下一题则自动将题号作为键&#xff0c;选项作为值传入&#xff0c;等待所有题目答完统一传给后端 let val11; let val22; let zhinew Map(); //map追加值得方式 zhi.…

将传入的参数以值一为key,值2为value的形式作为JSON接收

let obj{};obj[值一]值2//结果为&#xff1a;{值一&#xff1a;值二}JSON.stringify(obj);//结果为&#xff1a;{值一&#xff1a;值二}

js针对img类型的文件上传实例

<!--accept限制上传图片的类型格式是&#xff1a;image/*,或text/* multiple是多选设置--> <input type"file" multiple accept"image/*" id"uploadInp"> <!--将选择的图片做一个缩略图--> <img src"" alt&qu…

H5 aliplayer的各种坑

https://www.cnblogs.com/qijinwen/p/8963373.html

关于分页 设置所有数据的唯一值,从一开始

分页&#xff1a; &#xff08;当前页码-1&#xff09;*分页大小1分页id 实战场景&#xff1a; //其中id是设置全部数据唯一值从一开始 result.data.records.forEach((value,index)>{obj{Id:((Number(result.data.page)-1)*Number(result.data.size))index1,MajorCateNam…

Vue打包后清除日志的方法

在项目的根目录创建vue.config.js文件module.exports{lintOnSave: true,configureWebpack: (config)>{if(process.env.NODE_ENV production){config.optimization.minimizer[0].options.terserOptions.compress.drop_console true}},}

1. Vue 中下载当前网页为pdf

1.下载插件 yarn add jspdf yarn add html2canvas //htmlToPdf.jsimport html2canvas from html2canvasimport JSPDF from jspdfexport default {install(Vue, options) {Vue.prototype.ExportSavePdf function (htmlTitle, currentTime,currentTag) {var element docume…

2. Vue 处理转换时间戳

//main.js//处理时间戳 Date.prototype.format function(format) {var date {"M": this.getMonth() 1,"d": this.getDate(),"h": this.getHours(),"m": this.getMinutes(),"s": this.getSeconds(),"q": Math.f…

Vue h5项目发现按手机的返回键应用直接退出了

//最近vue做个项目&#xff0c;发现按手机的返回键应用直接退出了&#xff0c;而不是返回上一页&#xff0c;为此特 //意解决了这一问题&#xff0c;具体代码如下&#xff1a;document.addEventListener(plusready, function() {var webview plus.webview.currentWebview();pl…

js生成二维码及解决二维码在微信中不能识别

在Vue项目中需要下载&#xff1a;qrcodejs2 使用命令&#xff1a; npm install qrcodejs2 yarn add qrcodejs2 js中引用&#xff1a; <script type"text/javascript" src"http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>htm…