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

最新推荐文章于 2024-08-22 15:29:47 发布

原创最新推荐文章于 2024-08-22 15:29:47 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue.js 专栏收录该内容

29 篇文章

订阅专栏

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

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

VUE学习：VUE学习：vue基础10————组件：组件的使用

前言
组件
- 自定义组件的属性

前言

本文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>