Vue.js组件的使用

最新推荐文章于 2023-01-29 12:09:45 发布

張忞彧

最新推荐文章于 2023-01-29 12:09:45 发布

阅读量140

点赞数 1

分类专栏：组件的基本使用文章标签： vue

本文链接：https://blog.csdn.net/Area66/article/details/108111884

版权

组件的基本使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue.js组件的使用

Vue.js组件化的基本使用

Vue.js组件化基本使用分为两步：
第一步是创建组件构造器对象：
const cpnC = Vue.extend({ template:`` })
其中template标签中放置的是组建的内容。
第二步是注册组件：
Vue.component(‘cpn’,cpnC)
其中component绑定的两个参数分别是组件标签名和组件构造器对象。完整的组件化基本使用代码如下：

`<body>
<div id="app">
    <cpn> </cpn>
</div>
<script src="../js/vue.js"></script>
<script>

    //es6 `` 定义字符串可以换行定义
    // 1.创建组件构造器对象
    const  cpnC = Vue.extend({
        template:`<div>
                    <h2>我是标题</h2>
                    <p>红红火火恍恍惚惚</p>
                    <p>水水水水水水水</p>
                  </div>`
    })

    //2.注册组件(组件标签名，组件构造器)
    Vue.component(`cpn`,cpnC)

    const app = new Vue({
        el: '#app',
        data: {
            message:'你好啊',
        }
    })
</script>
</body>

全局组件和局部组件

在注册组件时，没有在Vue实例对象中注册的组件均为全局组件，而在Vue实例对象里面注册的组件为局部组件，全局组件可在多个Vue实例当中使用。全局组件与局部组件注册方式不同：
全局组件在Vue实例外部注册：Vue.component(’cpn‘,cpnC)
而局部组件在Vue实力内部注册：

const app = new Vue({
        el: '#app',
        data: {
            message:'你好啊',
        },
        //注册局部组件
        components:{
            //cpn使用组件时的标签名
            cpn:cpnC
        }
    })

组件注册的语法糖形式

注册全局组件的语法糖：

Vue.component(`cpn2`,{
        template:`
    <div>
        <h2>我是标题2</h2>
        <p>我是内容，呵呵呵呵</p>
    </div>
        `
    })

注册局部组件的语法糖：

const app = new Vue({
        el: '#app',
        data: {
            message:'你好啊',
        },
        //注册局部组件的语法糖
        components:{
            cpn1: {
                template:`
    <div>
        <h2>我是标题1</h2>
        <p>我是内容，呵呵呵呵</p>
    </div>`
            }
        }
    })

组件模板的分离写法

如果组件模板写在template标签里面，当模板过多时会显得程序臃肿，这时可以采用组件的分离写法，具体方式是将组件模板从template中分离出来。有两种方式分离模板，一种是js方式，另一种是采用template标签。
js方式分离模板：

<script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容，呵呵呵呵</p>
    </div>
</script>

template标签形式分离模板：

<template id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容，呵呵呵呵</p>
    </div>
</template>

注意：两种写法均需用id将模板与组件绑定，其中绑定方式为：Vue.component('cpn',{ template:'#cpn' })
另外：js写法，类型必须是text/x-template

父组件与子组件

下面先创建两个组件：第一个组件：

const cpnC1 = Vue.extend({
    template:`
    <div>
    <h2>我是标题1</h2>
    <p>我是内容，哈哈哈哈哈</p>
</div>`
})

第二个组件组件：

const cpnC2 = Vue.extend({
    template:`
    <div>
    <h2>我是标题2</h2>
    <p>我是内容，呵呵呵呵</p>
    <cpn1></cpn1>
</div>`,
    components:{
        cpn1:cpnC1
    }
})

注意第一个组件里面注册了第二个组件
当两个组件存在一个组件在另一个组件中被注册的情况时，被注册的组件称为子组件，另一个则称为父组件。

组件中数据的存放问题

在Vue实例当中，我们的数据可以存在data:{}当中，但是在组件中数据却是存在下面的函数当中的。

data(){
return{ ... }
}

下面解释为什么在函数data中存数据，而不是在标签data中存数据。我们知道，在Vue实例当中的数据，是可以被多个组件公用的数据，但是在组件当中，我们的组件可能被多次在多个不同的地方使用，假如组件数据可以存在标签data当中，那么会出现这种情况：如果我们定义两个计数器，分别实现加减操作，我们在当前页面使用该组件进行了加操作，而下一个页面内使用该组件返回的时之前页面产生的结果，但是我们并不希望两者相互干扰，所以Vue组件数据是存在data函数当中，因为组件的实例对象并不公用一个data函数。具体代码如下：

<body>
<!--组件实例对象，不共用一个data-->
<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>

</div>
<template id="cpn">
    <div>
    <h2>当前计数：{{count}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
<!--    1.注册组件-->
Vue.component(`cpn`,{
    template:`#cpn`,
    data(){
        return{
            count:0
        }
    },
    methods:{
        increment(){
            this.count++
        },
        decrement(){
            this.count--
        }
    }
})

    const app = new Vue({
        el: '#app',
        data: {
            message:'你好啊',
        }
    })
</script>
</body>

下篇介绍组件间的通信。

張忞彧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js组件的使用

Vue.js组件的使用Vue.js组件化的基本使用Vue.js组件化基本使用分为两步：第一步是创建组件构造器对象：const cpnC = Vue.extend({ template:`` })其中template标签中放置的是组建的内容。第二步是注册组件：Vue.component(‘cpn’,cpnC)其中component绑定的两个参数分别是组件标签名和组件构造器对象。完整的组件化基本使用代码如下：`<body><div id="app"> <
复制链接

扫一扫