一.组件的作用
我们在开发过程中，会复用许多的代码，我们不会写许多重复的代码，这样也会使我们的代码变得很臃肿，我们在c语言的学习过程中，使用到了函数来封装我们的函数来实现代码的复用，我们在vue中，可以使用组件来封装我们的代码。组件可以使我们很轻易地对我们的代码进行修改，任何我们所看到的页面都可以分解成组件。如下：
官方文档的例子，我们将一个页面分解为一颗树。
二.使用组件
创建组件构造器
我们通过Vue.extend()可以创建一个组件构造器，其中上面的（）里面的内容可以认为是一个对象，``在Tab之上，是一个特殊符号，与单引号类似，但是可以不受行的限制。
一个模板对象
注册组件
注册语法
其中，tagName为组件名，options为组件配置项。
例子中，'myButton’为组件名，temp为组件配置项。
使用组件
使用语法：
tagName为我们自定义的组件名。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<!--使用组件-->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type = "text/javascript">
//创建组件构造器
const temp = Vue.extend({
template:
`<h1>
Good Morning
</h1>`
})
//注册组件
Vue.component('myButton',temp)
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
三.全局注册和局部组注册
全局注册
我们通过Vue.component()注册的组件为全局组件，它可以在vue的任何实例当中被使用。 语法：
局部注册
我们在vue实例中注册的组件为局部组件，它只能被本实例中被使用。 例如：
注意，不是vue实例不能使用任何的vue实例。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<my-button></my-button>
<my-button></my-button>
<my-button2></my-button2>
</div>
<div id = "app1">
<my-button></my-button>
<!--在这里不能用 <my-button2></my-button2>-->
</div>
<script type = "text/javascript">
const temp = Vue.extend({
template:`
<h2>Welcome to Vue</h2>
`
})
//全局组件
Vue.component('myButton',temp);
const app = new Vue({
el:"#app",
data:{
},
//局部组件
components:{
myButton2:temp
}
})
const app1 = new Vue({
el:"#app1",
})
</script>
</body>
</html>
四.父组件和子组件
如下面的例子，使用组件中的components属性，就可以在子组件中使用父组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<my-button></my-button>
</div>
<script type = "text/javascript">
const tempFather = Vue.extend({
template:
`<h1>
Good Morning
</h1>`
})
const tempSon = Vue.extend({
template:
`<div>
<h1>Good Night</h1>
<temp></temp>
</div>
`,
components:{
temp:tempFather
}
})
const app = new Vue({
el:"#app",
data:{
},
components:{
myButton:tempSon
}
})
</script>
</body>
</html>
五.注册组件的语法糖写法
我们以第一个实例为例子：
没使用语法糖前
使用语法糖后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
<!--使用组件-->
<my-button></my-button>
<my-button></my-button>
<my-button></my-button>
</div>
<script type = "text/javascript">
//创建组件构造器
//注册组件
Vue.component('myButton',{
template:
`<h1>
Good Morning
</h1>`
})
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
转载：https://blog.csdn.net/weixin_45965358/article/details/115796059
查看评论