VUE学习：vue基础12————组件：自定义组件的属性

最新推荐文章于 2024-06-18 23:15:23 发布

北凉冬

最新推荐文章于 2024-06-18 23:15:23 发布

阅读量501

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200561

版权

vue.js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文深入探讨了Vue框架中的组件使用，特别是如何通过props自定义组件属性。示例展示了如何在组件模板中使用这些自定义属性，如`mytitle`和`myTest`，并传递数据到子组件的差值表达式中。文章通过实例代码解释了如何在模板中设置原生属性并由Vue管理。

摘要由CSDN通过智能技术生成

提示：
本文为VUE栏目：VUE学习：vue基础12————组件：自定义组件的属性

前言

本文vue框架中组件相关。

提示：以下是本篇文章正文内容，下面案例可供参考

组件

自定义组件的属性

利用props自定义属性，自定义的属性名可以直接在差值表达式中使用

<body>
<div id="app">
    <test mytitle="hello world"></test>
    <test mytitle="你好世界" my-test="geigei"></test>
</div>
<template id="t1">
<!--    给模板中的p标签设置一个原生的title属性，交给vue管理-->
    <p :title="myTest">{{mytitle}}</p>
</template>

</body>
<script>
    Vue.component('test',{
        template:"#t1",
        // 自定义属性，自定义的属性名可以直接在差值表达式中使用
        props:['mytitle','myTest'],

    })
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
    });
</script>

在这里插入图片描述

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础12————组件：自定义组件的属性

提示：本文为VUE栏目：VUE学习：vue基础12————组件：自定义组件的属性VUE学习：VUE学习：vue基础10————组件：组件的使用前言组件自定义组件的属性前言本文vue框架中组件相关。提示：以下是本篇文章正文内容，下面案例可供参考组件自定义组件的属性利用props自定义属性，自定义的属性名可以直接在差值表达式中使用<body><div id="app"> <test mytitle="hello world"></test
复制链接

扫一扫

专栏目录