【Vue】中 $attrs 中的使用方法
发布时间:2020-12-14 04:22:56 所属栏目:大数据 来源:网络整理
导读:vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class ?和? style ?除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和? style ?除外),并且可以通过? v-bind="$attrs" ?传入内部组件——
vue官网是这样介绍的: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( <div id="app"> A{{msg}} <my-button :msg="msg"></my-button> </div> ?
首先我们有三个组件A-B-C,然后想A中的属性传入C中,基本的做法是这样的,一层一层通过props往下传递
<script> let vm = new Vue({ el: ‘#app‘,data: { msg: ‘100‘ },components: { ‘MyButton‘: { props: [‘msg‘],template: `<div>B<my-input :msg="msg"></my-input></div>`,components: { ‘MyInput‘: { props: [‘msg‘],template: ‘<div>C{{msg}}</div>‘ } } },} }) </script>
但是B中并没有使用到A中传递过来的属性,写props代码就是多余的了,那么$attrs可以接受上级传递过来的属性,那么我们就可以直接把$attrs传入下级
?
<script> let vm = new Vue({ el: ‘#app‘,data: { msg: ‘100‘ },components: { ‘MyButton‘: { // props: [‘msg‘], template: `<div>B<my-input v-bind="$attrs"></my-input></div>`,components: { ‘MyInput‘: { props: [‘msg‘],template: ‘<div>C{{msg}}</div>‘ } } },} }) </script> 注意组件别写错了,组件是在父级模板中使用的,最外层的也是模板,el表示模板挂载在哪个元素的位置 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |