开篇寄语
伯衡君此前分享了那篇入门Vuejs的文章中就有涉及到组件内容，具体可以参看下方的前情提要，本篇文章主要是继续探讨Vuejs中组件的从初级到高级的开发步骤，以加深对Vuejs的学习和了解，本篇文章将着重将一些难以理解的部分简单化，以降低学习难度，分享给大家。
前情提要
内容详情
本篇文章以Vue3版本为例，Vue2版本与之区别不是很大。
- 全局组件
- 先将之前在入门文章中介绍的组件构造方法列出来，以加深回忆，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs Demo</title>
</head>
<body>
<div id="app">
<helloworld></helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({});
app.component('helloworld', {
data() {
return {
msg: "Hello World"
}
},
template: `<h1>{{ msg }}</h1>`,
})
app.mount("#app")
</script>
</body>
</html>
从中可以看出，使用Vuejs创建了一个名为<helloworld></helloworld>的组件，而实际内容，则是在template中设置好的。
其中，
app.component('helloworld', {
data() {
return {
msg: "Hello World"
}
},
template: `<h1>{{ msg }}</h1>`,
})
"helloworld"是声明了一个组件，相当于js中的var/const/let。
- 局部组件
- 声明组件，在Vuejs中又分为全局声明和局部声明，上面那个例子就是一个全局声明的例子，接下来介绍一下局部声明的例子，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<helloworld></helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const cpnc = {
template: `
<div>
<h2>Title</h2>
<p>.......</p>
<p>.......</p>
</div>`
}
const app = Vue.createApp({
data() {
return {
msg: "Hello World"
}
},
components: {
'helloworld': cpnc,
}
});
app.mount("#app")
</script>
</body>
</html>
- 父子组件
- 即两组组件中，一组组件使用了另一组组件，试举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<helloworld>
</helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const cpnb = {
template: `
<div>
<button>Click Me</button>
</div>`,
}
const cpnc = {
template: `
<div>
<h2>Title</h2>
<p>.......</p>
<abc></abc>
<p>.......</p>
</div>`,
components: {
'abc': cpnb,
}
}
const app = Vue.createApp({
data() {
return {
msg: "Hello World"
}
},
components: {
'helloworld': cpnc,
}
});
app.mount("#app")
</script>
</body>
</html>
可以看出cpnc引用了cpnb声明的组件abc。
- 分离写法
- 除了之前所写的方式，还可以通过分离的写法来实现，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<helloworld>
</helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script type="text/x-template" id="cpn1">
<div>
<h2>Title</h2>
<p>......</p>
</div>
</script>
<script>
const app = Vue.createApp({
data() {
return {
msg: "Hello World"
}
},
components: {
helloworld: {
template: '#cpn1'
},
}
});
app.mount("#app")
</script>
</body>
</html>
还有一种形式，类似于下面这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<helloworld>
</helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<template id="cpn1">
<div>
<h2>Title</h2>
<p>......</p>
</div>
</template>
<script>
const app = Vue.createApp({
data() {
return {
msg: "Hello World"
}
},
components: {
helloworld: {
template: '#cpn1'
},
}
});
app.mount("#app")
</script>
</body>
</html>
- 数据存放
- 在组件内部进行数据传递，则需要加一个data()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
<helloworld>
</helloworld>
</div>
<script src="https://unpkg.com/vue@next"></script>
<template id="cpn1">
<div>
<h2>{{ count }}</h2>
<button @click="count++">Add</button>
<button @click="count--">Subtract</button>
</div>
</template>
<script>
const app = Vue.createApp({
data() {
return {
msg: "Hello World"
}
},
components: {
helloworld: {
template: '#cpn1',
data() {
return {
count: 1
}
}
},
}
});
app.mount("#app")
</script>
</body>
</html>
- 父组件向子组件传递数据
- 父组件向子组件传递数据需要用到props属性，props向下传递，事件向上传递，也就是父组件通过 prop 给子组件下发数据，子组件通过 $emit 事件, 给父组件发送数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
</head>
<body>
<div id="app">
Content：{{ text }}<br>
<com-input :text="text" v-on:change="handleChange" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: "Hello World"
}
},
methods: {
handleChange(val) {
this.text = val.path[0].value;
}
}
});
app.component('com-input', {
props: {
text: {
type: String,
default: "请输入"
}
},
template: '<input v-model="msg"/>',
data() {
return {
msg: this.text
}
},
methods: {
handleChange(e) {
this.$emit('change', this.msg)
}
}
})
app.mount("#app")
</script>
</body>
</html>
初步了解组件的开发后，下一篇文章则是更为精进的了解组件的高级用法了。
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-
