vue自定义接收父组件传输的值(不使用props )$attrs

@小朱呀路

已于 2023-01-09 14:12:50 修改

阅读量447

点赞数

文章标签：前端 javascript vue.js

于 2022-11-02 15:12:02 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127651594

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.global.js"></script>
  </head>
  <body>
    <style>
      .add{
        background-color: red;
      }
    </style>
    <div id="app"> 
      <my-head  title='你好' class='add'></my-head>
    </div>
    <script>
      let app = Vue.createApp({
        data() {
          return { title:''  };
        },
      });
    
      app.component("MyHead", {  
        //子组件 不使用props接收父组件传输的值
       // props: {
        //   title: {
        //     type: String,
        //   },
        //   myclass:{
        //     type:String
        //   }
        // },
        template: `
      <header>  
       <h1 v-bind:title='$attrs.title'>logo</h1>
       <h2 v-bind:myclass='$attrs.myclass'>logo</h2>
           <ul>
            <li>首页</li> 
            <li>音乐</li>
            <li>视频</li>
          </ul>
       </header>
            
            `,
            //inheritAttrs：false
        methods: {
          created(){
           console.log(this.$attrs);
           console.log(this.$attrs.title);
           this.title=this.$attrs.title
			}
        },
      });
      let vm = app.mount("#app");
    </script>
  </body>
</html>

子组件不接受父组件传输的值，那么属性会直接作用于子组件的最外层容器的节点上可以使用inheritAttrs：false阻止否则像下图所致
在这里插入图片描述
使用了props那么就会当作正常属性使用(正常接收就不必使用inheritAttrs：false)

自定义接收父组件传输的值作用子组件某个节点上
(不可使用props接收才能实现)

//所有属性添加到h2的节点
 <h2 v-bind='$attrs'>logo  </h2>

在这里插入图片描述

//针对不同的属性添加到不同的节点
  <h1 v-bind:title='$attrs.title'>logo  </h1>
  <h2 v-bind:myclass='$attrs.myclass'>logo  </h2>

在这里插入图片描述
我即想作用于子组件的某个节点也想使用传过来的值但是作用于子组件的某个节点的时候不可以props接收参数怎么办

//子组件的生命周期使用
 created() {
          console.log(this.$attrs);
          console.log(this.$attrs.title);
          this.title=this.$attrs.title
        },