Vue组件

最新推荐文章于 2022-08-04 22:15:28 发布

清欢·

最新推荐文章于 2022-08-04 22:15:28 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/shiqinghuan/article/details/107743198

版权

什么是组件：
组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleal的th:fragment等框架有着异曲同工之妙，通常一个应用会以一棵嵌套的组件树的形式来组织

第一个Vue组件：

使用Vue.component()方法注册组件，格式如下：

<body>
<div id="app">


</div>
</body>
<script>
    //定义一个Vue组件component
    Vue.component("zujian1",{
       template: '<li>{{benti}}</li>'
    });
    //实例化Vue
    var vm =new Vue({
        el: "#app",
        data: {
            items: ["java","linux","html"]
        }
    });
</script>

Vue.component()：注册组件
zujian1:自定义组件的名字
template：组件的模板

使用props属性传递参数:
需要传递参数到组件的，此时就需要使用props属性了！

  注意：默认规则下props属性里的值不能为大写；

<body>
<div id="app">

    <!--组件：传递给组件中的值：props -->
    <zujian1 v-for="item in items" v-bind:benti="item"></zujian1>

    <div></div>

</div>
</body>
<script>
    //定义一个Vue组件component
    Vue.component("zujian1",{
        props: ['benti'],
       template: '<li>{{benti}}</li>'
    });
    //实例化Vue
    var vm =new Vue({
        el: "#app",
        data: {
            items: ["java","linux","html"]
        }
    });
</script>

v-for="item in items"：
	遍历Vue实例中定义的名为items的数组，并创建同等数量的组件

v-bind:benti="item"：
	将遍历的 item 项绑定到组件中 props 定义名为 item 属性上；
	= 号左边的benti为 props 定义的属性名，
	右边的为item in items 中遍历的item项的值