首页 > 其他分享 >vue中$attrs

vue中$attrs

时间:2022-12-26 00:33:06浏览次数:35  
标签:... School vue attrs props 组件

$attrs 用来保存给子组件绑定了,但子组件没有接收的数据,如下:

// 父组件
...
<School v-bind="{a, b, c}"></School>
...
// 子组件 School
...
props: ['a', 'b']
...

打印子组件的 $attrs,如下所示:

 

 

 通常,此属性可以用来跨组件通信,比如父组件想传给子子组件,可以使用如下方法:

// 父组件
...
<School v-bind="{a, b, c}"></School>
...
// 子组件 School
...
<Class v-bind="$attrs"></Class>
...
props:[],
...
// 子子组件 Class
...
props:['a', 'b', 'c'],
...

此时,子子组件可以接收到来自父组件的数据

标签:...,School,vue,attrs,props,组件
From: https://www.cnblogs.com/xt112233/p/17004887.html

相关文章

  • vue.delete 删除数组
    删除数组指定索引的元素可以采用delete,Array.splice和vue.$delete三种方法如下所示:leta=[1,2,3,4,5]letb=[1,2,3,4,5]letc=[1,2,3,4,5]deletea[2]b.......
  • Vue3中页面不能根据props数据动态变化怎么办?
    解决方法:使用toRefs结构,使其具有响应式,再使用!import{reactive,defineProps,toRefs}from'vue';constprops=defineProps({xAxisData:{type:Array,......
  • 【Vue.js入门到实战教程】14-基于 Laravel Jetstream 的Vue 技术栈编写表单组件
    Laravel8引入Jetstream作为前端UI库在本月8号,Laravel8.0正式发布,随后Vue3.0 也正式发布,不过围绕Vue3生态的很多库还处于beta阶段,所以目前学院君这里的Vu......
  • Vue之vue.config.js配置文件
    使用vueinspect>output.js可以查看到Vue脚手架的默认配置。使用vue.config.js可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh其中这个配置文件需要和pa......
  • 【Vue.js入门到实战教程】12-在 Laravel 项目中编写单文件 Vue 组件
    我们在《​​【Vue.js入门到实战教程】11-VueLoader(下)|编写一个单文件Vue组件​​》中演示了如何在VueCLI原型项目中编写单文件Vue组件并进行编译,不过VueCLI是......
  • Vue之Render函数
    关于不同版本的Vue:   1.vue.js与vue.runtime.xxx.js的区别:      (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。      (2).vue.runt......
  • Vue基础 · 父子组件之间的交互(5)
     1、父子组件交互<body><divid="app"><!--子组件接收到”change"方法,绑定父组件的方法--><number@change="countAdd"></number><number@change="co......
  • Vue分析脚手架
     分析脚手架 首先打开创建的vue_test项目,其中main.js:该文件是整个项目的入口文件  内容解释: /*该文件是整个项目的入口文件*///引入VueimportVuefrom......
  • Jeecgboot-Vue3 v1.2.0 版本正式发布,企业级低代码平台
    项目介绍Jeecgboot-Vue3采用Vue3.0、Vite、Ant-Design-Vue、TypeScript等新技术方案,包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。Je......
  • Vue 自定义菜单组件
    第一步:创建组件  数源 子组件接收父页面传值用的是props props:['menuList']; 第二部使用组件 1.使用import导入组件 importtreeMenufrom'........