首页 > 其他分享 >springboot+vue学习(2)

springboot+vue学习(2)

时间:2023-10-22 15:00:55浏览次数:31  
标签:slot ... vue springboot parent 学习 内容 props 组件

1、ref :为子组件指定一个索引 ID,给元素或者组件注册引用信息。refs是一个对象,包含所有的ref组件。

<div id="parent">
  <user-profile ref="profile"></user-profile>(子组件)
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

ps:$表示refs为vue对象,而不是普通的js对象。

2、props:父组件向子组件传值(数据),驼峰式改为横线式。

Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})
3、scope 作用域

在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象:

<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
 
4、is 用于动态组件并且给予DOM内模板到限制来工作
 
动态组件:
由于table、ul、ol等标签内无法插入自定义标签,只能插入特定标签,所以使用is属性带入。通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})
<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变! -->
</component>
 my-row是自定义组件


<table>
  <tr is="my-row"></tr>
</table>
 

 5.slot分发内容
不具名slot用来备用插入,子组件只有不具名的slot时候,父组件才回调用slot内容,如果子组件有其他内容,父组件的内容会替换掉slot内容,slot内容不显示。

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>
  

父组件模版:
<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>
  

渲染结果:
<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>
  

 

6、sync 字符修饰符
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定的值。
是一个会被扩展为一个自动更新父组件属性的 v-on 侦听器。
如<comp :foo.sync="bar"></comp>会被拓展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:this.$emit('update:foo', newValue)

标签:slot,...,vue,springboot,parent,学习,内容,props,组件
From: https://www.cnblogs.com/zjsdbk/p/17780452.html

相关文章

  • 2023-2024-1 20231320 《计算机基础与程序设计》第四周学习总结
    2023-2024-120231320《计算机基础与程序设计》第四周学习总结作业信息这个作业属于哪个课程<班级的链接>(2023-2024-1计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(2022-2023-1计算机基础与程序设计第四周作业)这个作业的目标<自学《计算机基础与......
  • springboot+vue学习
    最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括checkbox表单类型,并且使用Element组件UI时,此时v-model绑定的数据也是动态生成的例如:定义的data的form里面是空对象,需要动态生成里面的keyexportdefault{data(){return{form:{}......
  • # 2023-2024-1 20231322 《计算机基础与程序设计》第四周学习总结
    作业信息|2023-2024-1-计算机基础与程序设计|(https://edu.cnblogs.com/campus/besti/2023-2024-1-CFAP))||2023-2024-1计算机基础与程序设计第四周作业||这个作业的目标|总结第四周学习过程中的疑问及收获||作业正文|(https://www.cnblogs.com/cjl03/p/17780446.html)|教材学习......
  • npm安装datav-vue3(一个大屏边框和装饰组件)后报错Failed to resolve entry for packa
    原因:个人认为应该是npm上的版本比较低,因为弄好后装饰只能用到第8个,后面的都没有,查看package.json里它的版本为^0.0.0-test.1672506674342,也就是说还没有正式版,在官方的说明里也有体现---[目前还处于Alpha阶段,所有的API及Props都可能在后续迭代中发生变化]介绍|DataV......
  • 2023/10/21 学习笔记
    vrrp与DHCPvrrp报文协议advertisement(心跳线)--目的ip地址224.0.0.18,目的mac地址01-00-5e-00-00-122,协议号是112.状态机:(优先级0-255) 默认0-2550代表主要退出255代表有设备和虚拟ip冲突可手动配置1-254优先级相同会比较接口地址大的优先优先级默认为10......
  • 信息安全系统设计与实现学习笔记6
    自学笔记6-重点总结1.Unix/Linux进程管理进程是对映像的执行。进程的产生是通过执行一个程序或指令,将程序加载到内存中成为一个独立的实体,并分配一个唯一的PID。子进程与父进程的关系:在bash中再调用bash时,会形成父子关系。注意要正确处理父进程生成子进程后的情况。......
  • 学习笔记6
    第3章Unix/Linux进程管理1.Unix/Linux中的进程什么是进程:进程是计算机中正在执行的程序的实例。每个进程有自己的内存空间、寄存器状态、文件描述符等信息,使其独立于其他进程。进程通常包括程序代码、数据、栈、堆以及进程控制块(ProcessControlBlock,PCB)等信息。进程状态:......
  • 深度学习驱动的图像场景分类:窥探视觉智能的未来【图像场景实战】
    图像场景分类是计算机视觉领域的重要任务之一,它涉及将图像分为不同的场景类别,如城市街景、山脉风景、海滩等。本文将介绍基于深度学习的图像场景分类方法,并提供相应的代码实例,展示了深度学习在图像场景分类中的技术深度和应用前景。图像场景分类是计算机视觉中的一项关键任务,对于图......
  • Springboot基础
    接口测试工具:postman参数原始方法Springboot方式复杂实体参数数组实体参数日期参数JSON参数路径参数响应数据......
  • CAN协议信号位-大小端学习记录
    CAN协议信号位-大小端学习进入汽车行业虽然是软件开发但是对底层的信号传递还是很感兴趣的,深入的学习了一下CAN协议中提到的大小端内容。还挺有意思的。我抽几个信号进行学习推断。有很多信号的推断我直接附上手绘图片仅记录一下分析过程。前提条件:了解DBC数据库文件能看懂了......