Vue从入门到放弃（三）——组件

最新推荐文章于 2024-08-15 20:12:45 发布

凤凰院凶真Z

最新推荐文章于 2024-08-15 20:12:45 发布

阅读量134

点赞数

分类专栏： Vue从入门到放弃文章标签： vue

本文链接：https://blog.csdn.net/tuohongweng3138/article/details/85240219

版权

Vue从入门到放弃专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

1.组件的概述
- 1.1组件的注册
2.给组件设置属性
3.父子组件关系
- 3.1在构造器外部声明组件
- 3.2父组件中使用子组件
4.标签

1.组件的概述

组件是什么？个人理解组件有三种理解：1.是自定义的标签2.可复用的HTML代码块3.可复用的页面（这个以后再说）

1.1组件的注册

1.1.1全局注册

<body>
        <div id="app">
            <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
            <mycomponent></mycomponent>
        </div>
        <div id="sss">
            <!-- 为啥叫全局呢，你看这里也能使用，下面的局部组件就不能这样使用-->
            <mycomponent></mycomponent>
        </div>
        <script type="text/javascript">
        Vue.component('mycomponent',{
            template:`<p style="color:red">全局注册组件</p>`
        })
            var app = new Vue({
                el: '#app'
            }
            );
            var sss = new Vue({
                el: '#sss'
            }
            );
        </script>
    </body>

Vue.component('组件名'，{})
{}里填写template选项:``,或者其他模板
此时组件的理解是自定义标签，后面我们还会学到给自定义标签添加属性

1.1.2局部组件

<body>
    <div id="app">
        <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
        <mycomponent></mycomponent>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            components: {
                "mycomponent": {
                    template: `<p style="color:green">我是局部组件</p>`
                }
            }
        }
        );
    </script>
</body>

用法：在Vue结构体中，components选项

 var app = new Vue({
            el: '#app',
            components: {
                "组件名": {
                    template: `这里写组件模板`
                }
            }
        }
        );

1.1.3Vue文件作为组件（以后再说）

2.给组件设置属性

2.1props设置属性

假如我们要给上面的自定义标签<mycomponent>添加一个where属性，也就是<mycomponent where=""></mycomponent>，该怎么办呢？先看代码：

<body>
    <div id="app">
        <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
        <mycomponent where="china"></mycomponent>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            components: {
                "mycomponent": {
                    template: `<p style="color:green">{{where}}</p>`,
                    props: ['where']//这里设置属性名
                }
            }
        }
        );
    </script>
</body>

props设置属性
我们也可以在全局注册组件时设置属性

<body>
    <div id="app">
        <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
        <mycomponent where="china"></mycomponent>
    </div>
    <div id="sss">
        <!-- 为啥叫全局呢，你看这里也能使用，下面的局部组件就不能这样使用-->
        <mycomponent where="中国"></mycomponent>
    </div>
    <script type="text/javascript">
        Vue.component('mycomponent', {
            template: `<p style="color:red">{{where}}</p>`,
            props: ['where']
        })
        var app = new Vue({
            el: '#app'
        }
        );
        var sss = new Vue({
            el: '#sss'
        }
        );
    </script>
</body>

2.2from-where与小驼峰

假如我们有个属性叫from-where，形如这种中间有-的，在props中命名，需要这样写fromWhere,即第一个单词小写，后面的每个单词大写

<body>
    <div id="app">
        <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
        <mycomponent from-where="china"></mycomponent>
    </div>
    <div id="sss">
        <!-- 为啥叫全局呢，你看这里也能使用，下面的局部组件就不能这样使用-->
        <mycomponent from-where="中国"></mycomponent>
    </div>
    <script type="text/javascript">
        Vue.component('mycomponent', {
            template: `<p style="color:red">{{fromWhere}}</p>`,
            props: ['fromWhere']
        })
        var app = new Vue({
            el: '#app'
        }
        );
        var sss = new Vue({
            el: '#sss'
        }
        );
    </script>
</body>

2.3属性的值与Vue实例的data绑定

<body>
    <div id="app">
        <!-- 组件使用，注意：需要在挂载的DOM节点使用 -->
        <mycomponent v-bind:where="message"></mycomponent>//v-bind的使用和绑定html标签时一样
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'china'
            },
            components: {
                "mycomponent": {
                    template: `<p style="color:green">{{where}}</p>`,
                    props: ['where']
                }
            }
        });
    </script>
</body>

3.父子组件关系

3.1在构造器外部声明组件

<body>
    <div id="app">
        <father></father>
    </div>
    <script type="text/javascript">
        var father = {
            template: `<div><p style="color:red;">我是父组件</p></div>`,//外部声明组件
        }
        var app = new Vue({
            el: '#app',
            components: {
                "father": father
            }
        });
    </script>
</body>

3.2父组件中使用子组件

<body>
    <div id="app">
        <father></father>
    </div>
    <script type="text/javascript">
        var son = {
            template: `<p style="color:green;">我是子组件</p>`
        }
        var father = {
            template: `
       <div>
        <p style="color:red;">我是父组件</p>
        <son></son></div>`,//父组件中引用子组件
            components: {//声明子组件
                "son": son
            }
        }
        var app = new Vue({
            el: '#app',
            components: {
                "father": father
            }
        });
    </script>
</body>

4.标签

这个标签是干嘛的呢？怎么用呢？让我们把代码敲进去看一下：

<body>
    <div id="app">
        <component v-bind:is="who"></component>
    </div>
    <script type="text/javascript">
        // 外部声明三个组件
        var componentA = {
            template: `<p style="color:red;">我是组件A</p>`
        }
        var componentB = {
            template: `<p style="color:green;">我是组件B</p>`
        }
        var componentC = {
            template: `<p style="color:yellow;">我是组件C</p>`
        }
        var app = new Vue({
            el: '#app',
            data: {
                who: 'componentA'
            },
            components: {
                "componentA": componentA,
                "componentB": componentB,
                "componentC": componentC
            }
        })
    </script>
</body>