程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

Vue中Non-props属性是什么

发布于2021-06-08 04:23     阅读(964)     评论(0)     点赞(19)     收藏(4)


先看一个通过props接收父组件参数的栗子:

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" />
      </div>
    `
  });

  app.component('counter', {
    props:['msg'],
    template: `
      <div>Counter</div>
    `
  });

  const vm = app.mount('#root');

再看一下如果不用props接受时的代码:

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" />
      </div>
    `
  });

  app.component('counter', {
    template: `
      <div>Counter</div>
    `
  });

  const vm = app.mount('#root');

比较一下两者的dom结构:
在这里插入图片描述
在这里插入图片描述
两张图分别是用props接收和未用props接收的效果图,两者对比可见:当父组件传过去的属性值如果子组件不接收时传过来的属性会放在最近的dom标签下.

inheritAttrs:false可以不在子组件中显示这个属性.

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" />
      </div>
    `
  });

  app.component('counter', {
    inheritAttrs:false,
    template: `
      <div>Counter</div>
    `
  });

  const vm = app.mount('#root');

inheritAttrs:false的意思是不继承父组件的属性.

还有就是当有多个根节点时Non-prpos就不会生效了:

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" />
      </div>
    `
  });

  app.component('counter', {
    // inheritAttrs:false,
    template: `
      <div>Counter</div>
      <div>Counter</div>
      <div>Counter</div>
    `
  });

  const vm = app.mount('#root');

这时dom标签下就不会有msg="hello"这个属性了.
在这里插入图片描述
但是如果我们想让某个div标签下有msg="hello"该怎么办呢?
可以添加v-bind="$attrs"使dom标签下有msg=“hello”:
在这里插入图片描述
v-bind="$attrs"的意思是把父组件传过来的所有Non-props全部放到那个标签中去.

也可以单一的去获取父组件传过来的Non-props的某一个属性值:

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" msg1="world" />
      </div>
    `
  });

  app.component('counter', {
    // inheritAttrs:false,
    template: `
      <div v-bind:msg="$attrs.msg">Counter</div>
      <div v-bind="$attrs">Counter</div>
      <div>Counter</div>
    `
  });

  const vm = app.mount('#root');

在这里插入图片描述

在Vue中Non-props属性不仅可以用在v-bind用在标签上还可以用在生命周期函数里或者JS的表达式里:

  const app = Vue.createApp({
    template: `
      <div>
        <counter msg="hello" msg1="hello1" />
      </div>
    `
  });

  app.component('counter', {
    // inheritAttrs: false,
    mounted() {
      console.log(this.$attrs.msg);
    },
    template: `
      <div :msg="$attrs.msg">Counter</div>
      <div v-bind="$attrs">Counter</div>
      <div :msg1="$attrs.msg1">Counter</div>
    `
  });

  const vm = app.mount('#root');

原文链接:https://blog.csdn.net/qq_52207728/article/details/117561940




所属网站分类: 技术文章 > 博客

作者:Jjxj

链接:http://www.qianduanheidong.com/blog/article/123766/3754c866a6995a621114/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

19 0
收藏该文
已收藏

评论内容:(最多支持255个字符)