扁平化网站设计趋势,建站宝盒成品网站演示,哪些专业要学网页制作,网站友情链接形式文章目录 透传属性如何禁止“透传属性和事件”多根节点设置透传访问“透传属性和事件” $props、$attrs和$listeners的使用详解 透传属性
透传属性和事件并没有在子组件中用props和emits声明透传属性和事件最常见的如click和class、id、style当子组件只有一个根元素时#xf… 文章目录 透传属性如何禁止“透传属性和事件”多根节点设置透传访问“透传属性和事件” $props、$attrs和$listeners的使用详解 透传属性
透传属性和事件并没有在子组件中用props和emits声明透传属性和事件最常见的如click和class、id、style当子组件只有一个根元素时透传属性和事件会自动添加到该根元素上如果根元素已有class或style属性它会自动合并
如何禁止“透传属性和事件”
在选项式 API 中你可以在组件选项中设置inheritAttrs: false来阻止在组合式 API 的script setup中你需要一个额外的script块来书写inheritAttrs: false选项声明来禁止
script
export default {inheritAttrs: false // 阻止自动透传给唯一的根组件
}
/script多根节点设置透传
多根节点的组件并没有自动“透传属性和事件”的行为由于Vue不确定要将“透传属性和事件”透传到哪里所以我们需要v-bind$attrs来显式绑定否则将会抛出一个运行时警告。
button classchip v-bind$attrs普通纸片/button访问“透传属性和事件”
在选项式 API 中我们可通过this.$attrs来访问“透传属性和事件”
在组合式 API 中的script setup中引入useAttrs()来访问一个组件的“透传属性和事件”
script setup
import { useAttrs } from vue;// 透传的属性和事件对象
let attrs useAttrs()// 在 JS 中访问透传的属性和事件
function showAttrs() {console.log(attrs)console.log(attrs.class)console.log(attrs.title)console.log(attrs.style)attrs.onClick()
}
/scripttemplatebutton classchip v-bindattrs/buttonh6{{ attrs }}/h6ulli{{ attrs.title }}/lili{{ attrs.class }}/lili{{ attrs.style }}/li/ulbutton clickattrs.onClick()执行透传的事件/buttonbutton clickshowAttrs在 JS 中访问透传的属性和事件/button
/templatestyle
.chip {border: none;background-color: rgb(231, 231, 231);padding: 8px 15px;margin: 10px;
}.rounded {border-radius: 100px;
}
/style$props、$attrs和$listeners的使用详解
$props当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。$listeners包含了父作用域中(不含 .native 修饰器的)v-on事件监听器。他可以通过 v-onlisteners传入内部组件
1、父组件
templatedivdiv父亲组件/divChild:foofoo:zoozoohandlehandleFun/Child/div
/templatescript
import Child from ./Child.vue
export default {components: { Child },data() {return {foo: foo,zoo: zoo}},methods: {// 传递事件handleFun(value) {this.zoo valueconsole.log(孙子组件发生了点击事件我收到了)}}
}
/script
2.儿子组件Child.vue
在儿子组件中给孙子组件添加v-bind$attrs这样孙子组件才能接收到数据。 $attrs是从父组件传过来的且儿子组件未通过props接收的数据例如zoo
templatediv classchild-viewp儿子组件--{{$props.foo}}与{{foo}}内容一样/pGrandChild v-bind$attrs v-on$listeners/GrandChild/div
/templatescript
import GrandChild from ./GrandChild.vue
export default {// 继承所有父组件的内容inheritAttrs: true,components: { GrandChild },props: [foo],data() {return {}}
}
/script
3.孙子组件GrandChild.vue
在孙子组件中一定要使用props接收从父组件传递过来的数据
templatediv classgrand-child-viewp孙子组件/pp传给孙子组件的数据{{zoo}}/pbutton clicktestFun点我触发事件/button/div
/templatescript
export default {// 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性inheritAttrs: false,// 在本组件中需要接收从父组件传递过来的数据注意props里的参数名称不能改变必须和父组件传递过来的是一样的props: [zoo],methods: {testFun() {this.$emit(handle, 123)}}
}
/script
