11-Vue的组件化开发(一)
组件化的基本使用
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<my-cpn>my-cpn>
<my-cpn>my-cpn>
<my-cpn>my-cpn>
<my-cpn>my-cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1.创建组件构造器对象
const cpnC = Vue.extend({
template: `
我是标题
我是内容
我是内容
`
})
// 2.注册组件
Vue.component("my-cpn", cpnC)
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
script>
body>
html>
1.什么是组件化
我的个人理解是将一部分代码拿出来，以备别处调用。学过面向对象的都应该知道，重复代码要封装，这个也间是类似的，比如将一个导航栏封装成一个组件，多个页面都要用到导航栏调用即可。组件化开发的两大优势：
- 分类明确，方便管理和维护。
- 解决了重复代码问题，使得代码可以随时复用。
2.组件化开发步骤
- 使用Vue.extend()创建组件构造器对象
- 使用Vue.component()注册组件
- 使用组件
详细代码如下：
const cpnC = Vue.extend({
template: `
<div>
<h2>我是标题h2>
<p>我是内容p>
<p>我是内容p>
div>
`
})
Vue.component("my-cpn", cpnC)
<my-cpn>my-cpn>
效果图如下：
全局组件和局部组件
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<cpn>cpn>
div>
<div id="app2">
<cpn>cpn>
div>
<script src="../js/vue.js">script>
<script>
// 1.创建组件构造器
const cpnC = Vue.extend({
template: `
我是标题
全局组件和局部组件都使用我了
`
})
// 2.1.注册全局组件(意味着可以在多个Vue的实例下使用)
Vue.component('cpn', cpnC)
// 2.2.注册局部组件
const app = new Vue({
el: "#app",
data: {
message: "你好"
},
components: {
// cpn是使用组件时的标签名
cpn: cpnC
}
})
const app2 = new Vue({
el: "#app2",
data: {
message: "你好"
}
})
script>
body>
html>
1.全局组件和局部组件的区别
- 全局组件可以在所有的Vue实例中使用
- 局部组件只能在当前注册组件的Vue实例中使用
2.怎么注册全局组件和局部组件
- 全局组件用Vue.component()注册，然后可以在所以的Vue实例中使用
- 局部组件在当前组件中使用components注册
上文代码中全局组件和局部组件同时使用。效果图如下：
父组件和子组件
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<cpn2>cpn2>
div>
<script src="../js/vue.js">script>
<script>
// 1.创建第一个组件构造器(子组件)
const cpnC1 = Vue.extend({
template: `
我是标题1
我是内容111
我是内容111
`
})
// 2.创建第二个构造器(父组件)
const cpnC2 = Vue.extend({
template: `
我是标题2
我是内容222
我是内容222
1.父组件和子组件的关系
- 调用者是父组件
- 被调用者是子组件
2.上文代码关系
此刻没有在root里面注册，所有不能使用 - Vue实例压根不知道有cpn1的存在，cpn2解析完成之后，才把整体交给vue实例
- 类似俄罗斯套娃
效果图如下：
组件模版的分离写法
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn2>cpn2>
div>
<script type="text/x-template" id="cpn">
<div>
<h2>我是通过script标签定义的</h2>
<p>我是内容</p>
<p>我是内容</p>
</div>
script>
<template id="cpn2">
<div>
<h2>我是通过template标签定义的h2>
<p>我是内容p>
<p>我是内容p>
div>
template>
<script src="../js/vue.js">script>
<script>
// 1.注册全局组件
Vue.component("cpn", { template: "#cpn" })
Vue.component("cpn2", { template: "#cpn2" })
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
script>
body>
html>
1.什么是模版分离
我酝酿了半个月好不容易想写几行代码，你还这么折磨我，不是我不想学，是老天不让我学…解决办法就是我们可以将模版template写到html里面去，而代码效果是这样的，好像是好看了一点。
2.怎么使用模版
每个组件都有一个template属性，只要绑定id即可如你所愿。
Vue.component("cpn", { template: "#cpn" })
Vue.component("cpn2", { template: "#cpn2" })
3.两种模版任你选择
- 通过script标签定义template
- 直接使用template标签
组件中的数据存放问题
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
div>
<template id="cpn">
<div>
<h2>{{title}}h2>
<p>我是内容p>
<p>我是内容p>
div>
template>
<script src="../js/vue.js">script>
<script>
// 1.注册一个全局组件
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
script>
body>
html>
1.组件数据关系
子组件和父组件是两个单独的个体，父组件有自己的data变量，同样子组件也有自己的data变量，子组件的data变量放在和template同一级下面即可，注意子组件的变量父组件不可以直接使用，同理父组件的变量子组件也不可以直接使用。
Vue.component("cpn", {
template: "#cpn",
data() {
return {
title: "我是定义在组件中的"
}
}
})
第一次记录自己的学习笔记，如果您发现问题，欢迎指点。