Vue组件基础

Posted 1156063074hp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue组件基础相关的知识,希望对你有一定的参考价值。

gitHub地址:https://github.com/huangpna/vue_learn里面的lesson06

一 vue组件基本实例

 举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app1</title>
</head>
<body>
    <div id="app1">
        <button-counter></button-counter>    <!--注意:点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。-->
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component(button-counter,{   //全局注册一个组件
        data:function () {
            return {
                count:0
            }
        },
        template:<div><button @click="count++">点击一下</button>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{count}}</span></div>
    });
    new Vue({el:#app1}); //创建一个vue实例
</script>
</html>

 

 

(1)因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

(2)一个组建的data选项必须是一个函数,而不是像之前一样直接接受一个对象

(3)有两种注册注册组件的方式:全局注册和局部注册;至此,我们的注册都只是通过Vue.component全局注册的。

(4)全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

二 通过prop给子组件传递数据

举个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app1</title>
</head>
<body>
    <div id="app1">
        <button-counter title="My journey with Vue"></button-counter>          //通过自定义特性传递值
        <button-counter title="Blogging with Vue"></button-counter>
        <button-counter title="Why Vue is so fun"></button-counter>
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component(button-counter,{   //全局注册一个组件
        props:[title],    //可以传递任何类型的值
        data:function () {
            return {
                count:0
            }
        },
        template:<div><button @click="count++">点击一下</button>&nbsp;&nbsp;&nbsp;&nbsp;<span v-if="count == 1">{{title}}</span></div>‘  //值显示,查看是否传递成功
    });
    new Vue({el:#app1}); //创建一个vue实例
</script>
</html>

 

一个组件默认可以用过任意数量的prop,任何值都可以传递给任何 prop。在上述例子中,你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样。

一个 prop 被注册之后,你就可以像上面例子一样把数据作为一个自定义特性传递进来。

例子2:

注意:这个时候我们想要给每篇博文渲染一个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app2</title>
    <style>
        #app2>div{
            width:800px;
            height:160px;
            background-color: #ff4225;
            font-size:35px;
            text-align:center;
            line-height:160px;
            margin:0 auto  20px;
        }
    </style>
</head>
<body>
    <div id="app2">
        <my-content v-for="item in dataList" v-bind:num="item.id" v-bind:title="item.title"></my-content>  <!--动态传递值-->
    </div>
</body>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component(my-content,{
        props:[title,num],
        data:function () {

        },
        template:<div>{{title}}------{{num}}</div>
    });
    new Vue({
        el:#app2,
        data:{
            dataList: [
                { id: 1, title: 博文组件 },
                { id: 2, title: 博文组件 },
                { id: 3, title: 博文组件 }
            ]
        }
    });
</script>
</html>

 

但是很多时候我们的博文不止需要标题和内容,可能要传递的数据更多,这个时候组件就会变得越来越复杂,这个时候你可以变成只接受一个单独的dataList props。

注意:必须将组件模板包含在一个父元素内,否则会报错。

 

以上是关于Vue组件基础的主要内容,如果未能解决你的问题,请参考以下文章

Vue3基础知识总结

Vue3基础知识总结

Vue3基础知识总结

vscode代码片段生成vue模板

vue3中的fragment(片段)组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中