组件化开发 - Fly

基本使用

1.Vue.extend()：

调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。

2.Vue.component()：

调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

<!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'>
        <!-- 3.使用组件 -->
   <cpn></cpn>
   <cpn></cpn>
    </div>
  <cpn></cpn>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script>
        //1.创建组件构建器
        const myComponent = Vue.extend({
            template: `
            <div>
        <h2>标题</h2>
        <p>哈哈哈</p>
    </div>
            `
        })
        //2.注册组件，并且定义组件标签的名称
        Vue.component('cpn',myComponent)
    const app = new Vue({
    el: '#app',
    
    })
    </script>
</body>
</html>

全局组件和局部组件

当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。

如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

<!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>
    </div>
    <div id='app1'>
        <!-- app实例下的组件，在app1中无作用 -->
        <cpn></cpn>
        <cpn1></cpn1>
        </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script>
    const myComponent = Vue.extend({
        template: `
        <div>
        <h2>标题</h2>
        <p>哈哈哈</p>
    </div>
        `
    })
// 全局组件
    Vue.component('cpn1',myComponent);
    const app = new Vue({
    el: '#app',
    data :{
    
    },
    methods:{
    
    },
    // 局部组件，只在当前实例中可以起作用
    components: {
        'cpn': myComponent
    }
    })

    let app1 = new Vue({
        el: '#app1',
        components:{
            
        }
    })
    </script>
</body>
</html>

父组件和子组件

父子组件错误用法：以子标签的形式在Vue实例中使用

因为当子组件注册到父组件的components时，Vue会编译好父组件的模块，该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了），是只能在父组件中被识别的。

类似这种用法，是会被浏览器忽略的。

<!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>
        <childcpn></childcpn>
    </div>

    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script>
    //创建子组件构建器
         const cpnc2 =  Vue.extend({
        template: `
        <div>
        <h1>我是子组件</h1>
        </div>
        `
    })
     //创建父组件构建器
    const myComponent =  Vue.extend({
        template: `
        <div>
        <h1>我是父组件</h1>
        </div>
        `,
        components:{
            childcpn : cpnc2
        }
    })
   //注册父组件
    Vue.component('cpn',myComponent)
 const app = new Vue({
    el: '#app',
    
    })
    </script>
</body>
</html>

注册组件语法糖

<!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>
    <cpn2></cpn2>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script>
        //注册全局组件语法糖
        Vue.component('cpn',{
            template: `
            <div>
        <h1>我是组件</h1>
        </div>
            `
        })
    const app = new Vue({
    el: '#app',
    //注册局部组件语法糖
    components: {
        cpn2:{
            template: `
        <div>
        <h1>我是组件2</h1>
        </div>`
        }
    }
    
    })
    </script>
</body>
</html>

模板的分离写法

<!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>
    </div>
<!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
  <!--<h2>我是标题</h2>-->
  <!--<p>我是内容,哈哈哈</p>-->
<!--</div>-->
<!--</script>-->

<!--2.template标签-->
    <template id="divide">
        <div>
            <h1>我是组件</h1>
            </div>
    </template>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <script>
    
    const app = new Vue({
    el: '#app',
    components: {
        'cpn':{
            template: '#divide'
        }
    }
    })
    </script>
</body>
</html>

学习笔记 Vue

Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

组件化开发2 上一篇

v-model的使用下一篇