有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue中子组件使用$attrs获取父组件传递的数据

vue 炮渣日记 3周前 (11-11) 9次浏览 已收录 0个评论 扫描二维码

父组件代码

<template>
  <!--使用attr绑定的方式向子组件传递数据-->
  <HelloWorld :cusAttr="FatherData"/>
</template>

<script>
  // 引入子组件
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'App',
    data() {
      return {
        FatherData: 'FDatas'
      }
    },
    components: {
      // 注册子组件
      HelloWorld
    },
    methods: {
    }
  }
</script>

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
</style>

子组件代码

<template>
  <div class="hello" @click="twoE"></div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      twoE() {
        // 使用$attrs获取父组件传来的数据
        console.log(this.$attrs.cusAttr);
      },
    }
  }
</script>

<style scoped>
  .hello {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址