第二十一篇 vue组件引入使用

这篇内容是关于组件在Vue中的引入和使用；什么是组件以及做组件化的开发，在Vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码耦合度，便于维护和管理；讲起来可能比较文绉绉，举一个简单的例子；

第二十一篇 vue组件引入使用通过以上例子是不是对组件有了新的认识，以及用组件化开发的一些益处！

组件的注册方式：

1）全局注册：Vue.component方法

2）局部注册：Vue实例的components属性

全局注册 - 自定义组件

ps：下面通过全局注册的方式来完成一个自定义组件 "modleA"；Vue.component("组件名",{ template : ( 放置组件的DOM结构，有对应methods，computed...) })

<div id="app">
    <model></model>
</div>
<script>
    Vue.component("modle",{
        template:`
            <div>
                <p>这就是一个modle组件</p>
            </div> 
        `
    })
    new Vue({
        el:'#app',
		data:{}
    })
</script>

第二十一篇 vue组件引入使用

接下来我们可以在组件当中设置一个按钮，点击按钮时反馈输出在控制台上；

<div id="app">
    <model></model>
</div>
<script>
    Vue.component("modle",{
        template:`
            <div>
                <p>这就是一个modle组件</p>
                <button @click="handleClick">点击</button>
            </div> 
        `,
        methods:{
            handleClick(){
                console.log('触发组件当中的handleClick事件！')
            }
        }
    })
    new Vue({ el:'#app'})
</script>

第二十一篇 vue组件引入使用

组件当中还有其他的，比如 watch，computed...都可以来使用；那么在项目中如何来运用组件，复用等会在后面做项目演示的时候进行一个讲解；这里如果去当前页面测试复用，我们只需要编写组件名称作为标签即可。

<div id="app">
    <modle></modle>
    <modle></modle>
    <modle></modle>
</div>

第二十一篇 vue组件引入使用

以上就是全局注册组件的引入和使用；下面来讲局部注册组件的引入和使用！

局部注册 - 自定义组件

在原来的modle组件当中我们来用这个components属性对child组件进行局部注册；

<script>
    Vue.component("modle",{
        components:{
           "child":{
                template:`
                    <div>
                        <p>这就是一个child组件</p>
                        <button @click="handleClick">点击</button>  
                    </div> 
                `,
                methods:{
                    handleClick(){
                        console.log('触发组件当中的handleClick事件！')
                    }
                }
            }
        },
        template:`
            <div>
                <p>这就是一个modle组件</p>
                <button @click="handleClick">点击</button>
                <child></child>
            </div> 
        `,
        methods:{
            handleClick(){
                console.log('触发组件当中的handleClick事件！')
            }
        }
    })
    new Vue({el:'#app'})
</script>

页面效果：

第二十一篇 vue组件引入使用

那么child这个组件只能被当前的modle访问到，而其他组件访问不到；进行测试一下，写一个全局组件modles看能否访问到局部组件child；

<div id="app">
    <modle><modle>
    <modles><modles>
</div>
...
Vue.component("modles",{
        template:`
        <div>
            <p>modles组件</p>
            <child></child>
        </div>`
    })

第二十一篇 vue组件引入使用

以上内容就是讲全局和局部注册自定义组件的内容，下面讲组件当中注意的点或者你可能遇到的问题，完后进行小结一下有关组件的一些内容；

组件名称

在编写组件起名称的时候当然是希望能更贴近内容本身，如我们要做一个底部进行复用可以是tabbar，导航可以navbar等之类的，那么当我们起以下的名称就需要注意一些问题了，下面来看一下；

<div id="app">
    <moduleA></moduleA>
</div>
<script>
    Vue.component("moduleA",{
        template:`
            <div> moduleA组件 </div>
        `
    })
    new Vue({el:'#app'})
</script>

运行一下，会发现这样的一个错误 Unknown custom element: <modulea> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

第二十一篇 vue组件引入使用

这里就是命名的方式写法不对，名字是 "驼峰式" 的，那么在html代码编写不能写为 <moduleA>，应该写成< module-A >的写法，下面我们修改运行一下：

<div id="app">
    <module-A></module-A>
</div>

第二十一篇 vue组件引入使用

自定义组件data必须是一个函数

自定义组件当中这个methods、computed和watch与正常的写法并无二样，唯独这个data，为什么自定义组件当中的data必须是一个函数呢？下面用一个简单的例子：

<script>
    Vue.component("moduleA",{
        template:`
            <div> moduleA组件 - name：{{name}} </div>
        `,
        data(){
            return{
                name:'sy'
            }
        }
    })
    new Vue({el:'#app',data:{}})
</script>

第二十一篇 vue组件引入使用

如果现在我写成这个data是一个对象而不是一个函数的话，会是怎么样呢？报错

...
// data(){
//     return{
//         name:'sy'
//     }
// }
data:{
    name:'sy'
}
...

第二十一篇 vue组件引入使用

这里能发现data不是这样data:{}，而是data(){return{}}，数据以一个函数的返回值的形式，下面小结为什么自定义组件data必须是一个函数？

组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，让各个组件实例维护各自的数据，互不干扰；如果单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果；

小结

下面来对这篇内容的一些东西进行一个小结以及所遇的问题；

1. 组件起名称：js(script)中编写驼峰式，则html需要用连接符 -
2. 组件中编写DOM结构时：没有代码的高亮显示（解决：通过vue单文件组件解决）
3. 组件中编写DOM时用到css：只能写行内样式（解决：通过vue单文件组件解决）
4. template(模板)：包含一个根节点（ps：将内容包裹起来）
5. 组件是孤岛，无法（直接）访问外边其他组件的状态或者方式（解决：间接的组件通信）
6. 自定义组件data必须是一个函数
7. 所有的组件写在同一个页面，代码很乱（解决：通过vue单文件组件解决）
补充：
    刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲，虽然用起来好用,但觉得不方便，这个在后面做项目的时候是通过vue单文件组件可以解决的，所以这些问题都在后续有其他的变化；
    使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法，那么就需要通过组件与组件之间间接通信完成；
    可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决；

本篇内容就讲解了Vue组件的引入和基本使用以及一些组件相关的知识点，接下来就来讲解相关组件的一些通信方式！感谢大家的观看，支持一下！

第二十一篇 vue组件引入使用

标签 Vue, 使用, 组件