vue组件系统

作者: coffee1949 | 来源:发表于2019-06-02 13:52 被阅读0次

uniapp自定义tabbar
实践学习资料 + 智宇推荐
我开源了一个绝对好用的基于vue2、vue3的系统步骤引导组件。
vue组件系统
Vue基础使用
vue
vuejs - （v-for、v-model、$event）-
组件分享之后端组件——基于Gin + Vue + Element
Vue3.0 父子组件传值方法
Vue.js组件

除了根组件之外的全局组件和局部组件的data数据必须是函数

data(){
    return {

    }
}

根组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        
    </div>
    <script type="text/javascript">
        //下面的new Vue就是根组件
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello,world'
            }
        })

    </script>
</body>
</html>

全局组件：

全局组件注册方式：Vue.component(组件名,{方法})
全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <child-component/>
    </div>
    <script type="text/javascript">

        //使用Vue.component()方法定义全局组件,参数一是组件名，参数二是组件模板和数据等
        Vue.component('child-component',{
            template: '<h1>hello,世界！</h1>'
        })
    


        //下面的new Vue就是根组件
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello,world'
            }
        })

    </script>
</body>
</html>

局部组件||子组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <hdcms></hdcms>
    </div>
    <script type="text/javascript">
        //下面的new Vue就是根组件
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello,world666'
            },
            // 局部组件||子组件
            components: {
                hdcms: {
                    template: '<h3>我是子666组件</h3>'
                }
            }
        })

    </script>
</body>
</html>

组件的template模板可以拆出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <hdcms></hdcms>
    </div>
    

    <!-- 这里把子组件的模板拆出来书写 -->
    <script type="text/x-template" id="news">
        <div>
            <h3>我是子组件的模板</h3>
        </div>
    </script>

    <script type="text/javascript">
        //下面的new Vue就是根组件
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello,world666'
            },
            // 局部组件||子组件
            components: {
                hdcms: {
                    template: '#news'
                }
            }
        })

    </script>
</body>
</html>