Vue组件化开发1

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。

组件使用的基本流程

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
    // 1、创建组件构造器对象
    const cpnC = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，111</p>
                <p>我是内容，222</p>
            </div>
            `
    })
    //2、注册组件
    Vue.component('my-cpn',cpnC)

    //3、使用组件
    const app = new Vue({
        el: '#app',
        data:{
        }
    })
</script>
</body>
</html>

上面的代码构造了一个名为cpnC的组件对象，并且通过Vue. Component对该组件对象进行了全局注册，最后根据注册时的标签名称直接使用。
全局注册语法如下：

Vue.component(tagName, options)

全局组件和局部组件的注册

全局组件意味着可以在多个Vue实例下面使用，可以通过Vue.component进行注册
局部组件以为着只能在当前注册的Vue实例里面使用，可以通过构造Vue实例时在components中注册
具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn></cpn>
    {{message}}搜索
</div>
<div id="app2">
    <cpn></cpn>
</div>
<script src="../js/vue.js"></script>
<script>
    // 1、创建组件构造器
    const cpnC = Vue.extend({
        template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容，111</p>
                <p>我是内容，222</p>
            </div>
        `
    });
    //2、注册组件（全局组件，意味着可以在多个Vue实例下面使用）
    // Vue.component('cpn', cpnC);

    // 在Vue实例里面的components里面注册局部组件
    const app = new Vue({
        el: '#app',
        data:{
            message: '你好'
        },
        components: {
            cpn: cpnC
        }
    })

    const app2 = new Vue({
        el: '#app2',
        data:{
        }
    })
</script>
</body>
</html>

父组件和子组件

这个就相当于在一个组件之中注册并使用了另一个组件，组件之间的嵌套使用，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
    //  1、创建第一个组件构造器（子组件）
    const cpnC1 = Vue.extend({
        template: `
            <div>
                <h2>我是标题1</h2>
                <p>我是内容，111</p>
            </div>
        `
    });
    //  2、创建第二个组件构造器（父组件）
    const cpnC2 = Vue.extend({
        template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容，222</p>
                <cpn1></cpn1>
            </div>
        `,
        //  在父组件中注册子组件
        components: {
            cpn1: cpnC1
        }
    });
    const app = new Vue({
        el: '#app',
        data:{
        },
        components: {
            cpn2: cpnC2
        }
    })
</script>
</body>
</html>

以上为个人见解，如有错误的地方，麻烦提醒下，万分感谢。

posted @ 2021-01-28 14:46  lamsacule  阅读(42)  评论(0)    收藏  举报