16.VUE--自定义组件的属性

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

休息休息夏

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

阅读量352

点赞数 1

分类专栏： VUE基础学习文章标签： vue html javascript vue.js

本文链接：https://blog.csdn.net/qq_42881159/article/details/117199918

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <test mytitle="hello world"></test>
    <test mytitle="你好世界" my-test="鼠标悬浮"></test>
</div>
<template id="t1">
    <p :title="myTest">{{mytitle}}</p>
</template>


</body>
<script>
    Vue.component('test',{
        template:"#t1",
        // data(){
        //     return {
        //         mytitle:"这里是标题",
        //     }
        // }
        /*自定义属性，自定义的属性名可以直接在插值表达式中使用*/
        props:['mytitle','myTest']
    })
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
    });
</script>
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

休息休息夏

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
16.VUE--自定义组件的属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <test mytitle="hello world
复制链接

扫一扫