我们学习vue的话关于组件，我们前期的话我们是务必要好好掌握的知识点，接下来我们话不多说开始解释我们的vue的组件化
首先先介绍它的作用：
主要的一个核心思路就是提高我们的代码的复用性、
比如我们将一个页面中的所有的处理逻辑全部放在一起，处理起来就会变得十分的复杂，
但是我们如果把这些的大的逻辑问题一个一个的拆分成一个一个的小的问题的话，就有利于我们更好的解决问题，
我们组件的类型分为两种类型一种是我们的全局组件，一种是我们的局部组件
全局组件的话可以在vue的多个实例中使用，
局部组件的话只可以在我们注册的那个实例的范围中使用，
vue的组件的使用我们分为两个步骤
1，注册组件
2，使用组件
——————————————————————————————————————
我们看我们如何注册组件首先看下我们的全局组件如何注册
我们注册组件的时候要用到vue的component（）方法这个方法有两个参数
第一个是我们的自定义的标签名，第2个是我们的一个配置对象我们下面用了一个变量去接收了我们创建的配置对象
这个配置对象里有一个template属性，这个是我们的模板。也就是我们的组件里的内容
我们可以这么写
let vTab = {
template: `
<div><p>我是段落</p>
<h1>自定义组件 我写什么，组件的内容就是什么</h1>
<p>我是段落</p>
<p>我是段落</p></div>
`
};
//1.注册组件
Vue.component("v-tab", vTab);
-----------------------------------------------------------------------
也可以这么写
Vue.component("v-tab", {
template: `
<div><p>我是段落</p>
<h1>自定义组件 我写什么，组件的内容就是什么</h1>
<p>我是段落</p>
<p>我是段落</p></div>
`
});
这两个的本质是一样的
不过我们要注意的是我们的这个注册组件要在我们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">
<!-- 这个是我们使用的组件 -->
<aoo></aoo>
</div>
<!-- 这个是我们的引入的vue的js -->
<script src="../a.js"></script>
<script>
// 这个是我们的配置对象
let appo ={
template:`
<div>
<h1>
我们的时间不多了老张
</h1>
</div>
`
}
// 这个是我们的全局的注册
Vue.component('aoo',appo)
let app = new Vue({
el: '#app'
})
</script>
</body>
</html>
我们在页面显示的就是
这个是我们注册的一个全局组件可以在多个vue的实例中使用
接下来我们看一下我们的局部组件
这个属性component
局部的要多加一个s，就是components
<!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">
<!-- 这个是我们使用的组件 -->
<aoo></aoo>
</div>
<!-- 这个是我们的引入的vue的js -->
<script src="../a.js"></script>
<script>
// 这个是我们的配置对象
let appo ={
template:`
<div>
<h1>
我们的时间不多了老张
</h1>
</div>
`
}
let app = new Vue({
el: '#app',
// 这个就是我们的局部组件注意这里的要加一个s
components:{
"aoo":appo
}
})
</script>
</body>
</html>
这个就是我们的局部组件但是小伙伴们有木有发现我们的js和代码写在一起了
现对于的话看着有些臃肿
好接下我们就来说说我们的template标签
template标签可以把我们的模板的代码写在html结构里这个标签是一个在位符。
接下来看看代码的格式
<template id="vtmp">
<div>
<h1>为赋新词强说愁</h1>
<h2>辛弃疾</h2>
</div>
</template>
这个我们可以写在html的标签里，
这里的id我们要用于关联我们的注册
上面这个只是个格式，看下面我们完整的代码（这个代码中我把局部和全局的都进行了演示）
可以自己复制下来好好看看
<!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">
<!-- 2.使用组件(全局)-->
<v-tab></v-tab>
<v-tmp></v-tmp>
<!--
这个是局部的组件 -->
<child></child>
</div>
<div id="app2">
<!--
这个是我们的全局的组件所以他会显示在页面上 -->
<v-tmp></v-tmp>
<!-- 这个是我们的局部的组件所以不会显示在页面上 -->
<child></child>
</div>
<template id="vtmp">
<div>
<h1>为赋新词强说愁</h1>
<h2>辛弃疾</h2>
</div>
</template>
<!-- 这个是我们创建的局部的组件 -->
<template id="child">
<h1>这是局部组件</h1>
</template>
<!-- 这个是我们引入的vue的js -->
<script src="./js/vue.min.js"></script>
<script>
//创建全局的 组件配置对象
let vTab = {
template: `
<div><p>我是段落</p>
<h1>自定义组件 我写什么，组件的内容就是什么</h1>
<p>我是段落</p>
<p>我是段落</p></div>
`
};
// 这里面的#vtmp就是我们和我们的注册进行关联的关键
let vTmp = {
template: "#vtmp"
}
//1.注册组件
Vue.component("v-tab", vTab);
Vue.component("v-tmp", vTmp);
let app = new Vue({
el: "#app",
components:{
// 这个是我们的一个局部的一个组件
"child":{
template:"#child"
}
}
})
let app2 = new Vue({
el: "#app2"
})
</script>
</body>
</html>
这里面的话逻辑性不强，所以我就在这里把一些例子放在一起小伙伴们好好看看
接下来我们来聊聊的局部中data与methods
我们的组件可以理解也是一个小的实例所以我们也可以在这里面定义我们的data和methods方法data和methods都是在组件的配置对象中创建的但是要注意的一点是我们组件里的dada是一个对象，但是我们组件里的data是一个函数，而且这个函数中还要return一个对象，因为我们的这个组件要在多个地方去调用，所以我们要写函数中，因为我们的函数在每次调用的时候都会创建一个新的变量，这样我们在多个地方调用的时候不会发生那种多个地方调用但只要有一个值变其他的值都会变的情况
当然大家是不是还是不理解很正常接下来我们来做个小案例你就明白辣呀，
<!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">
{{msg}}
<abc></abc>
<abc></abc>
<abc></abc>
</div>
<template id="tmp">
<button @click="add">你点击了{{counter}}次</button>
</template>
<script src="./js/vue.min.js"></script>
<script>
let data = {
counter:0
}
//1.创建组件的配置对象
let options = {
template: `#tmp`,
data(){
// 这个 return { counter:0 };的话我们每次调用返回的是一个新的对象
return {
counter:0
};
// return data;这个的话里面放的是一个地址所以多个地方调用会都改变
// return data
},
methods:{
add(){
this.counter++;
}
}
}
//2.注册全局组件
Vue.component("abc", options);
let app = new Vue({
el: "#app",
data: {
msg: "app实例"
},
methods: {
say() {
console.log("拜拜了各位");
}
}
})
</script>
</body>
</html>
这个如果data里面是 return {counter:0};的话是这个样子的
但是如果是这个return data的话则是这个样子的
methods这个方法就是和我们正常vue实例的方法是一样的。
上面那个多的代码中就用上了我们子组件的方法我把他分了出来，上面的那个代码大家可以自己复制下来试试
这个下面的是代码格式
//1.创建组件的配置对象
let options = {
template: `#tmp`,
data(){
// 这个 return { counter:0 };的话我们每次调用返回的是一个新的对象
// return {
// counter:0
// };
// return data;这个的话里面放的是一个地址所以多个地方调用会都改变
return data
},
methods:{
add(){
this.counter++;
}
}
}
这个是我们父子组件的一些基础，希望可以对不了解的你有一点点的帮助
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
