学习博客：【Vue】组件

「已注销」

于 2022-06-17 12:53:18 发布

阅读量97

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Aurinko324/article/details/125331568

版权

vue.js 学习前端

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

组件：可复用的 vue 实例

Vue.component()：注册组件
my-component-li：自定义组件的名字
template：组件的模板
props：传递参数默认规则下其属性的值不能大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--View层 模板-->
<div id="app">
    <!--组件：传递给组件中的值 props-->
    <phone v-for="item in items" v-bind:item="item"></phone>
</div>

<!--导入Vue.js-->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

<script>

    /*定义一个Vue组件 component */
    Vue.component("phone",{
        //props 接受参数
        props:['item'],
        template:'<li>{{item}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            items: ["中兴","小米","华为"]
        }
    });
</script>

</body>
</html>