vue 组件化开发 一 组件基本使用全局和局部组件父组件和子组件的区别
Posted 小余努力搬砖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 组件化开发 一 组件基本使用全局和局部组件父组件和子组件的区别相关的知识，希望对你有一定的参考价值。
目录
前言：
完整内容请关注：
(1条消息) Vue 的基础学习_小余努力搬砖的博客-CSDN博客
https://blog.csdn.net/yzq0820/category_11934130.html?spm=1001.2014.3001.5482
一、组件的基本使用
简单的组件化使用例子
组件是可复用的 Vue 实例，且带有一个名字：
在这个例子中是button-counter 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<button-counter></button-counter>
template中是组件的DOM元素内容。
<button-counter></button-counter>使用组件
<div id="app">
<button-counter></button-counter>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('button-counter',
data:function() //必须是函数
return
count:0
,
template:'<button @click="handle">点击了count</button>',//只能有一个根元素
methods:
handle:function()
this.count++
)
const vm = new Vue(
el:"#app",
data()
return
)
</script>二、全局组件和局部组件
全局注册，通过 Vue.component
局部注册，通过 components:
全局组件
全局组件，可以在多个vue实例中使用，类似于全局变量。
使用Vue.component('HelloWorld', data())方式注册，直接使用<button-counter></button-counter>调用。HelloWorld是全局组件的名字，data()是定义的组件对象。
<hello-world></hello-world>
第二个全局组件通过<HelloWorld></HelloWorld>
实现了在渲染
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('HelloWorld',
data()
return
msg:"HelloWorld"
,
template:`<div>msg</div>`
)
Vue.component('button-counter',
data:function() //必须是函数
return
count:0
,
template:`
<div>
<button @click="handle">点击了count</button>
<HelloWorld></HelloWorld>
</div>`,
//只能有一个根元素
methods:
handle:function()
this.count++
)
const vm = new Vue(
el:"#app",
data()
return
)
</script>局部组件
局部组件，只能在当前vue实例挂载的对象中使用，类似于局部变量，有块级作用域。
使用方式与全局变量一样，直接使用<hello-world></hello-world>调用
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
<hello-jerry></hello-jerry>
</div>
<script src="./vue.js"></script>
<script>
let HelloWorld =
data:function()
return
msg:'HelloWorld'
,
template:`<div>msg</div>`
;
let HelloTom =
data:function()
return
msg:'HelloTom'
,
template:`<div>msg</div>`
;
let HelloJerry =
data:function()
return
msg:'HelloJerry'
,
template:`<div>msg</div>`
const vm = new Vue(
el:"#app",
data:
,
components:
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jerry': HelloJerry,
)
</script>三、父组件和子组件的区别
上述代码中定义了两个组件对象cpn1和cpn2，在组件cpn2中使用局部组件注册了cpn1，并在template中使用了注册的cpn1，然后在vue实例中使用注册了局部组件cpn2，在vue实例挂载的div中调用了cpn2，cpn2与cpn1形成父子组件关系。
注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend(
template:`
<div>
<h2>标题1</h2>
<p>组件1</p>
</div>`
)
// 组件2中使用组件1
const cpn2 = Vue.extend(
template:`
<div>
<h2>标题2</h2>
<p>组件2</p>
<cpn1></cpn1>
</div>`,
components:
cpn1:cpn1
)
const app = new Vue(
el:"#app",
components://局部组件创建
cpn2:cpn2
)
</script>以上是关于vue 组件化开发 一 组件基本使用全局和局部组件父组件和子组件的区别的主要内容，如果未能解决你的问题，请参考以下文章