Vue.js组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43599049/article/details/115055661

1 传统方式

组件使用的三个步骤：

创建组件构造器
注册组件
使用组件

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>



    <script src="vue.js"></script>
    <script>
        //创建组件
        const cpn = Vue.extend({
            template: `
            <div>
                <p>我是一个组件</p>
                <p>我是第二行</p>
            </div>
            `
        })


        //注册组件
        Vue.component('cpn', cpn);


        let a = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

</html>

当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件。

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>



    <script src="vue.js"></script>
    <script>
        //创建组件
        const cpn = Vue.extend({
            template: `
            <div>
                <p>我是一个组件</p>
                <p>我是第二行</p>
            </div>
            `
        })


        let a = new Vue({
            el: '#app',
            components: {
                'cpn': cpn
            }
        })
    </script>
</body>

2 父组件和子组件

可以通过在父组件中引用子组件，但是如果未在Vue实例中注册子组件，那么在文中也无法引用子组件。

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div id="app">
        <cpn2></cpn2>
        <cpn2></cpn2>
        <cpn2></cpn2>
    </div>



    <script src="vue.js"></script>
    <script>
        //创建组件
        const cpn = Vue.extend({
            template: `
            <div>
                <p>我是第一个组件</p>
            </div>
            `
        })


        const cpn2 = Vue.extend({
            template: `
            <div>
                <p>我是第二个组件</p>
                <cpn></cpn>
                <cpn></cpn>
            </div>
            `,
            components: {
                'cpn': cpn
            }
        })

        let a = new Vue({
            el: '#app',
            components: {
                'cpn2': cpn2
            }
        })
    </script>
</body>

</html>

3 组件语法糖

为了简化这个过程，主要是为了简化Vue.extend()：

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>



    <script src="vue.js"></script>
    <script>
        Vue.component('cpn', {
            template: `
            <div>
                <p>组件语法糖</p>
                <p>组件语法糖</p>
            </div>
            `
        })

        let a = new Vue({
            el: '#app',
        })
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>



    <script src="vue.js"></script>
    <script>
        let a = new Vue({
            el: '#app',
            components: {
                'cpn': {
                    template: `
                    <div>
                        <p>组件语法糖</p>
                        <p>组件语法糖</p>
                    </div>
                    `
                }
            }
        })
    </script>
</body>

</html>

4 组件分离

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>


    <template id="cpn">
        <div>
            <p>模板分离写法</p>
            <p>模板分离写法</p>
        </div>
    </template>


    <script src="vue.js"></script>
    <script>
        let a = new Vue({
            el: '#app',
            components: {
                'cpn': {
                    template: '#cpn'
                }
            }
        })
    </script>
</body>

</html>

5 组件的数据存放

组件对象也有一个data属性(也可以有methods等属性)，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>


    <template id="cpn">
        <div>
            <p>模板分离写法</p>
            <p>模板分离写法</p>
            <p>{{message}}</p>
        </div>
    </template>


    <script src="vue.js"></script>
    <script>
        let a = new Vue({
            el: '#app',
            components: {
                'cpn': {
                    template: '#cpn',
                    data() {
                        return {
                            message: 'Hello world!'
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>