vue-组件化开发基础

时间 2019-11-07

标签 vue 组件开发基础繁體版

原文原文链接

组件化开发基础、分为三个步骤：

建立组件构造器对象
注册组件
使用组件

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<div id="app">
    <!-- 三、使用组件 -->
    <my-cpn />
</div>

<body>
    <script>
        // 一、建立组件构造器对象
        const cnpC = Vue.extend({
            template: `
                <div>
                    <h2>我是标题</h2>
                    <p>组件化开发的思想</p>    
                </div>
            `
        })
        // 二、注册组件
        Vue.component('my-cpn', cnpC)
        let vm = new Vue({
            el: '#app',
            data: () => ({}),
            methods: {}
        })
    </script>
</body>

</html>

步骤解析：

一、建立组件构造器对象

Vue.extend（）建立了一个组件构造器html

一般在建立组件构造器的时候，一般会传入 template 表明咱们自定义组件的模板vue

该模板是使用组件的地方，显示的HTML代码app

二、注册组件

Vue.component()组件化

调用Vue.component() 是将刚才组件构造器构造的组件注册为一个组件，而且给它起一个标签名spa

所需的有两个参数：code

一、标签名二、组件构造器名component

三、使用组件

<my-cpn></my-cpn> 或 <my-cpn />
注：组件必须挂载到VUE实例下面才有效果，即#app 里面