vue前端开发自学,透传属性的练习demo

这篇具有很好参考价值的文章主要介绍了vue前端开发自学,透传属性的练习demo。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<template>
  <!-- <Main /> -->
  <!-- <ComA /> -->
  <AttrComponent class="attr-container"/>
</template>
<script>
  // import ComponentEvent from "./components/ComponentEvent.vue"
  // import Main from "./components/Main.vue"
  // import ComA from "./components/ComA.vue"
  import AttrComponent from "./components/AttrComponent.vue"
  export default{
    components:{
      // ComponentEvent,
      // Main,
      // ComA,
      AttrComponent
    }
  }
</script>

vue前端开发自学,透传属性的练习demo!以上代码是,父组件的情况。也是App.vue的入口文件内容。


<template>
    <!--必须是有且仅有一个根元素,否则该透传属性不会生效的-->
    <h3>透传属性demo</h3>
</template>
<script>
    export default{
        inheritAttrs:true
    }
</script>
<style>
    .attr-container{
        color:red;
    }
</style>

这是子组件内容,AttrComponent.vue的代码内容。可以看出来,它里面是有且仅有一个根元素,H3标签,如果多一个就不行了。透传属性就会失效了。必须是有且仅有一个根元素才行。

我们还特意做了继承的设定,目前是true。允许继承。所以可以看见,的确是透传属性class成功了。

vue前端开发自学,透传属性的练习demo,vue,vue.js,前端,javascript

如果改成false.不允许继承的话,就无法透传那个class属性了。

vue前端开发自学,透传属性的练习demo,vue,vue.js,前端,javascript

实际上,这种情况我们很少使用到。因为class,id,attribute这三样事情。我们都有各自的操作方法和语法内容。很少会有人会使用透传属性这样的操作方式。大家作为了解即可。文章来源地址https://www.toymoban.com/news/detail-817762.html

到了这里,关于vue前端开发自学,透传属性的练习demo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue前端开发自学基础,动态切换组件的显示

    vue前端开发自学基础,动态切换组件的显示!这个是需要借助于,一个官方提供的标签,名字叫【Component】-[代码demo:component :is=\\\"ComponetShow\\\"/component]。 下面看看代码详情。 以上是在app.vue里面写的,一个按钮,绑定点击事件,切换组件A,和组件B的显示。里面很明显,是调用了一

    2024年01月20日
    浏览(38)
  • vue前端开发自学,异步加载组件,提升用户端的客户体验度

    vue前端开发自学,异步加载组件,提升用户端的客户体验度!现实项目开发时,组件的数量非常庞大,如果都是一口气加载完,对手机用户来说,体验度会很差。因此,非常有必要使用异步加载。 那就是,用到了哪个组件,再去加载它就行了。用不到的时候,不加载它。下面看

    2024年01月16日
    浏览(43)
  • vue前端开发自学,祖孙多层级组件嵌套关系数据传输

    vue前端开发自学,祖孙多层级组件嵌套关系数据传输!官方提供了一个解决方案,就是,在根组件内使用provide,哪个子孙组件想调用这个数据,就可以inject接收就行了。虽然是方便了,但是这个有点要求,就是只能自上而下的传递。不能反过来(不能子孙给根节点!) 如图,根

    2024年01月17日
    浏览(45)
  • vue3前端开发,自学一下reactive,ref的差异是什么。

    vue3前端开发,自学,学习一下,reactive和ref的差别。以及基础用法。 前言,这2个东西,都能对外输出动态的数据对象。但是,有点区别,是,reactive只支持输入一个对象作为参数,ref则还可以支持简单的数据信息作为参数。待会有案例代码展示。 下面看看代码内容。第一个

    2024年01月18日
    浏览(49)
  • vue前端开发自学,子组件传递数据给父组件,使用$emit

    vue前端开发自学,子组件传递数据给父组件,使用$emit 父子组件之间互相传递数据的情况非常常见,下面为大家介绍的是,来自子组件,给父组件传递数据的情况。 如图,以上代码是父组件的代码情况,ComponentEvent.vue。 可以看出来,里面的特殊点,在于,有个子组件的引用和标

    2024年01月23日
    浏览(41)
  • vue前端开发自学,父子组件传递数据,借助于Props实现子传父

    vue前端开发自学,父子组件传递数据,借助于Props实现子传父! 之前我们说过,Props这个是用在父传子的情况下,今天为大家介绍的代码,就是在父组件里,自定义事件,绑定一个函数,让子组件可以接受到这个自定义事件绑定的函数,从而“委婉”的传递数据给父组件。 如图

    2024年01月23日
    浏览(39)
  • Vue3前端开发,父组件给子组件传递数据练习

    Vue3前端开发,父组件给子组件传递数据练习!还是借用刚刚的组件模板,来开展父传子的练习。 依旧是需要借助官方提供的宏函数来接收数据。defineProps. 这个是父组件里面的内容。我们自定义了2个变量,一个是车厘子单价。一个是纯文本。 一个数字类型,一个文本类型。都

    2024年01月22日
    浏览(44)
  • Vue3前端开发,provide和enject的基础练习,跨层级传递数据

    Vue3前端开发,provide和enject的基础练习,跨层级传递数据! 声明:provide虽然可以跨层级传递,但是依旧是需要由上向下的方向传递。根传子的方向。 这个是入口组件的内容,我们调用了一个中间组件Middle.vue。 这个是中间组件的内容,我们调用了一个三级组件Three.vue. 这个是第三

    2024年01月22日
    浏览(47)
  • Vue3前端开发,如何获取组件内dom对象以及子组件的属性和方法

    Vue3前端开发,借助Ref来获取组件内dom对象,借助defineExpose编译宏可以获取到子组件的属性和方法。 app入口文件,我们作为父组件,在里面调用了自定义组件TestCom.vue。 先做了一个测试,借助于ref来访问自身的dom对象。如图所示是可以拿到的。 ref又称谓钩子函数,在vue2版本中

    2024年01月22日
    浏览(59)
  • 前端开发攻略---Vue实现防篡改水印的效果。删除元素无效!更改元素属性无效!支持图片、元素、视频等等。

    版权保护 :水印可以在图片、文档或视频中嵌入作者、品牌或版权所有者的信息,以防止未经授权的复制、传播或使用。当其他人使用带有水印的内容时,可以追溯到原始作者或版权所有者,从而加强版权保护。 身份识别 :水印可以用作作者或品牌的标识符,使观众能够轻

    2024年04月17日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包