组件化开发
认识组件
<body>
<div id="app">
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",})
</script>
</body>
<body>
<div id="app">
<!-- 使用全局组件 -->
<cpn-header></cpn-header>
<cpn-header></cpn-header>
</div>
<script src="./vue.js"></script>
<script>
// 定义组件名字与模板
Vue.component("cpnHeader",{
template: "<div><span>这是一个头部组件</span></div>",})
const app = new Vue({
el: "#app",})
</script>
</body>
组件声明
<body>
<div id="app">
<!-- 使用全局组件 -->
<cpn-header></cpn-header>
<cpn-header></cpn-header>
</div>
<script src="./vue.js"></script>
<script>
// 定义组件名字与模板
Vue.component("cpnHeader",})
</script>
</body>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<script src="./vue.js"></script>
<script>
// 定义组件
const cpn = {
template:"<div><mark>HELLO,WORLD</mark></div>",}
const app = new Vue({
el:"#app",components:{ // 进行注册
cpn,//es6语法
}
})
</script>
</body>
组件模板
// 定义组件
const cpn = {
template: `
<div>
<div>
HELLO,VUE
</div>
<div>
HELLO,WORLD
</div>
</div>
`,}
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<div>
HELLO,VUE
</div>
<div>
HELLO,WORLD
</div>
</div>
</template>
<script src="./vue.js"></script>
<script>
const cpn = {
template: "#cpn",}
const app = new Vue({
el: "#app",components: {
cpn,}
})
</script>
</body>
<body>
<div id="app">
<cpn-header></cpn-header>
<cpn-header></cpn-header>
</div>
<!--子组件模板-->
<main id="cpn-header-template">
<div>
<span>这是一个头部组件</span>
</div>
</main>
<script src="./vue.js"></script>
<script>
var cpnHeader = {
template: "#cpn-header-template",}
const app = new Vue({
el: "#app",components: { // Vue实例内部进行注册
cpnHeader,}
})
</script>
</body>
子组件的data
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<p>{{childrenMessage}}</p>
</div>
</template>
<script src="./vue.js"></script>
<script>
const cpn = {
template: "#cpn",data() {
return {
childrenMessage: "子组件数据",}
}
}
const app = new Vue({
el: "#app",components: {
cpn,}
})
</script>
</body>
组件通信
<body>
<!--根组件模板-->
<div id="app">
<father></father>
</div>
<!--子组件模板-->
<template id="son">
<div>
<!-- ④ 子组件现在已经可以正常渲染出该值了，使用接收的变量名即可-->
<p>{{childerRecv}}</p>
</div>
</template>
<!--父组件模板-->
<template id="father">
<div>
<!--② 子组件通过v-bind，将父组件中的值存储到props中，需要注意的是再模板中应该使用 - 进行多单词分割-->
<son :childer-recv="fatherMessage"></son>
</div>
</template>
<script src="./vue.js"></script>
<script>
const son = {
template: "#son",// ③ 现在子组件中已经用childerRecv这个变量名接收到父组件中传递过来的值了，需要注意的是接收时使用驼峰式命名进行接收，否则模板中不会渲染
props: ["childerRecv",]
}
const father = {
template: "#father",components: {
son,},data() {
return {
// ① 父组件的作用域内能够接收到该值了
fatherMessage: {id: 1,name: "yunya",age: 18},}
}
}
const app = new Vue({
el: "#app",components: {
father,}
})
</script>
</body>
<body>
<div id="app">
<!-- 接收： - 分割命名 -->
<cpn :recv-msg="sendMsg"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<!-- 使用： 与props同样的命名方式 -->
<div><span>接收到的信息:{{recvMsg}}</span></div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
// props：使用驼峰式命名，为了子组件模板中能够使用而不产生报错
props: ["recvMsg",],template: "#cpn-template",data: function () {
return {}
}
}
const app = new Vue({
el: "#app",data: {
sendMsg: {
id: 1,name: "admin",}
},components: { // Vue实例内部进行注册
cpn,}
})
</script>
</body>
| 验证项目 |
描述 |
| type |
一个Array，允许的类型 |
| required |
一个Boolen，是否必须传递 |
| default |
任意类型 |
| validator |
一个Function，返回需要验证的数据字段 |
<body>
<div id="app">
<cpn :recv-msg="sendMsg"></cpn>
</div>
<!-- 模板 -->
<template id="cpn-template">
<div><span>接收到的信息:{{recvMsg}}</span></div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
props: { // props是一个Object
recvMsg: { // 参数验证是一个Object
// 允许的类型
type: [Object,Array],// 是否是必须传递
required: true,// 如果没有传递的默认值
default() {
return "默认值";
},// 验证，当验证失败后，会在调试台显示错误
validator(v) {
// v就是父组件传递过来的数据
return v.id;
},data: {
sendMsg: {
// id: 1,}
})
</script>
</body>
<body>
<div id="app">
<!-- 父组件监听add事件，并且交由fatherAdd进行处理-->
<cpn @add="fatherAdd"></cpn>
结果:{{showResult}}
<!-- 结果显示在父组件 但是计算确是在子组件 -->
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2">
<button @click="sum">计算</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",data() {
return {
n1: 0,n2: 0,methods: {
sum() {
let sonResult = this.n1 + this.n2;
// 自定义了一个add事件，由父组件进行监听。并且传递了一个值
this.$emit("add",sonResult);
}
}
}
const app = new Vue({
el: "#app",data: {
showResult: 0,methods: {
fatherAdd(v) {
this.showResult = v;
}
}
})
</script>
</body>
<body>
<div id="app">
<span>父组件的值:{{num}}</span>
<cpn :son-num.sync="num"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<span>子组件的值:{{sonNum}}</span>
<p><input type="text" @keyup="changeValue" v-model="newValue" placeholder="输入新的值"></p>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
props: ["sonNum",data: function () {
return {
newValue: this.sonNum,methods: {
changeValue() {
this.$emit("update:sonNum",this.newValue)
}
}
}
const app = new Vue({
el: "#app",data: {
num: 100,})
</script>
</body>
组件访问
<body>
<div id="app">
<button @click="btn">父组件调用子组件方法</button>
<cpn></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<span>{{msg}}</span>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",data: function () {
return {
msg: "子组件show未调用",methods: {
show() {
this.msg = "子组件show已调用";
}
}
}
const app = new Vue({
el: "#app",methods: {
btn() {
// 取出第0个子组件，进行调用其下方法
this.$children[0].show();
}
}
})
</script>
</body>
<body>
<div id="app">
<button @click="btn">父组件调用子组件方法</button>
<!-- 取名字 -->
<cpn ref="nbcpn"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<span>{{msg}}</span>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",methods: {
show() {
this.msg = "子组件show已调用";
}
}
}
const app = new Vue({
el: "#app",methods: {
btn() {
// 根据取的名字进行调用
this.$refs.nbcpn.show();
}
}
})
</script>
</body>
<body>
<div id="app">
{{msg}}
<cpn></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<button @click="btn">子组件调用父组件方法</button>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",data: function () {
return {}
},methods: {
btn() {
this.$parent.show();
}
}
}
const app = new Vue({
el: "#app",data: {
msg: "父组件show未调用",methods: {
show() {
// 取出自己的父组件，进行调用其下方法
this.msg = "父组件show已调用";
}
}
})
</script>
</body>
组件的动态切换
<body>
<div id="app">
<div :is="choice"></div>
<input type="radio" v-model="choice" value="inputCPN">文本框
<input type="radio" v-model="choice" value="textareaCPN">文本域
</div>
<script src="./vue.js"></script>
<script>
const inputCPN = {
template: "<div><input type='text'/></div>",}
const textareaCPN = {
template: "<div><textarea></textarea></div>",data: {
choice: "inputCPN",components: {
inputCPN,textareaCPN,})
</script>
</body>
组件的钩子函数
| 钩子函数 |
描述 |
| beforeCreate |
创建Vue实例之前调用 |
| created |
创建Vue实例成功后调用（可以在此处发送异步请求后端数据） |
| beforeMount |
渲染DOM之前调用 |
| mounted |
渲染DOM之后调用 |
| beforeUpdate |
重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） |
| updated |
重新渲染完成之后调用 |
| beforeDestroy |
销毁之前调用 |
| destroyed |
销毁之后调用 |
<div id="app">
<p>{{msg}}</p>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: "#app",data:{
msg:"HELLO,VUE",beforeCreate() {
console.log("创建Vue实例之前...");
},created() {
console.log("创建Vue实例成功...");
},beforeMount() {
console.log("准备渲染DOM...");
},mounted() {
console.log("渲染DOM完成...");
},beforeUpdate() {
console.log("准备重新渲染DOM...");
},updated() {
console.log("重新渲染DOM完成");
},// 后两个暂时体会不到
beforeDestroy() {
console.log("准备销毁当前实例");
},destroyed() {
console.log("当前实例销毁完成...");
}
})
</script>
</body>
服务热线 19970861797
