Vue组件：创建、template模板、data、父子组件

1、创建注册全局组件：任意vue实例均可使用，本质是个自定义标签对，组件可以重复调用；Vue.component(arg1,arg2);arg1:组件名称，即自定义标签名，命名方式有三种：my-com,myCom,MyCom；arg2:是个对象，描述组件的相关信息；template:模板内容，即组件内部的内容，也是自定义标签对中的内容；...

洪布斯

2806人浏览 · 2019-12-05 17:41:54

洪布斯 · 2019-12-05 17:41:54 发布

1、创建

注册全局组件：

任意vue实例均可使用，本质是个自定义标签对，组件可以重复调用；

Vue.component(arg1, arg2);

arg1: 组件名称，即自定义标签名，命名方式有三种： my-com, myCom, MyCom；

arg2: 是个对象，描述组件的相关信息；template: 模板内容，即组件内部的内容，也是自定义标签对中的内容；

注意事项，只有一个根元素，类似于Html文档，或者一个迷你版本的html文档

调用方式：只有一种 , my-com

        Vue.component('my-com', {
            template: '<div> <h1> 这是标题 </h1></div>'
        });

注册局部组件：

只有在当前vue实例范围内使用

        var vue = new Vue({
            el: '#demo',
            data: {},
            methods: {},
            computed: {},
            // 注册局部组件，只有在当前vue实例范围内使用
            components: {
                // 属性名对应arg1,   MyTab, myTab
                // 属性值对应arg2
                'my-com': {
                    template: '<div> 组件 </div>'
                }
            }
        });

2、template模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件--template模板</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="demo">

    <my-com></my-com>
    
</div>

<!--
    script 是个标签对，type类型，决定标签引入内容的类型， 默认type=text/javascript
    script/style标签对，浏览器会读取内容，但是不会渲染在页面中，即不会显示
    如果template模板内容中放置大量的标签对，会将内容绑定在某个具有type=text/html的script标签中

    组件模板的作用域，是独立的，隔离的。默认情况下，无法调用其他地方的变量
-->
<script type="text/html" id="com">
    <div>
        <h2> 标题标签 </h2>
        <p> {{ '字符串' }} </p>
        <p> {{ msg }} </p>
    </div>
</script>
<script>

    var vue = new Vue({
        el: '#demo',
        data: {
            msg: '实例中的数据'
        },
        components: {
            myCom: {
                template:'#com'   // 类似于el属性，设置模板内容
            }
        }
    });

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

3、data

vue实例： el, data, methods, computed, components 等

vue组件： template(el), data, methods, computed, components等

vue实例，被称为根实例，也被称为根组件

组件是迷你版本的实例

凡是vue实例具备的属性，vue组件几乎都有

组件之间的作用域是独立，隔离的。默认情况下，组件之间的数据或方法是不共享的，除非组件之间互相通信

组件的模板内容，组件本质是自定义标签对。标签对内部是具有原始内容(初始内容)，默认情况下，模板内容，会完全替代原始内容；

vue实例的内容范围 <div id=demo>

vue组件的内容范围 template : '#com' 所在的范围

<div id="demo">
    <my-com></my-com>
    <my-com>
        <p> 可以写内容 </p>
    </my-com>

</div>

<script id="com" type="text/html">
    <div>
        <h2>组件内容 </h2>
        <button @click="num++" > 改变 {{ num }}  </button>
    </div>
</script>

<script>
    var vue = new Vue({
        el: '#demo',
        data:{

        },
        components: {
            myCom: {
                template: '#com',
                // data是个函数，通过return返回值设置当前组件的数据
                data: function() {
                    return {
                        msg: '组件中的数据',
                        num: 10
                    }
                },
                methods:{},
                computed:{},
                components:{}
            }
        }
    });
</script>

4、父子组件

父子组件：在组件A的模板内容中，调用组件B，组件A被称为父组件，组件B是子组件；

vue实例：根组件

<div id="demo">

    <my-com></my-com>

</div>


<script type="text/html" id="com">
    <div class="com">
        <h2> 这是com组件 </h2>
        <first-com></first-com>
    </div>
</script>


<script type="text/html" id="first">
    <div class="first">
        <h2> first组件的声明 </h2>
    </div>
</script>


<script>
    var vue = new Vue({
        el: '#demo',
        data: {

        },
        components: {
            myCom: {
                template: '#com',
                data: function () {
                    return {}
                },
                components: {
                    firstCom: {
                        template: '#first',
                        data: function () {
                            return {}
                        },
                    }
                }
            }
        }
    })
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^