Vue组件
1.组件的基本使用
组件可以理解为一个模块，当这个模块需要重复使用时，定义为组件，在其他页面中也可以注册组件并引用
比如下面案例中点击计数的按钮，定义为组件后多次使用更为方便
案例：
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>vuetitle>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<counter>counter>
<counter>counter>
div>
<script>
// 定义组件
const counterTemp = {
template: ``,
// 定义组件使用到的数据属性
data() {
return {
num: 0,
};
},
};
// 全局注册组件：在所有的vue实例中都可以使用组件
// 参数1：组件名称
// 参数2：具体的组件
// Vue.component("counter",counterTemp)
var vm = new Vue({
el: "#root",
// 局部注册组件：只能在当前Vue实例中使用
components: {
// 组件名称：具体组件
counter: counterTemp,
},
});
script>
body>
html>
组件的定义必须放在Vue创建对象之前
子与父组件之间无法直接使用对方数据，所以为了达成父组件向子组件通信，要让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递
2.父组件向子组件通信
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>vuetitle>
<script src="../JS/vue.js">script>
head>
<body>
<div id="root">
<aaa :number="count" :ids="arr" :person="p">aaa>
div>
<script>
var aaa = {
// 定义组件的模板
template: `{{num}}---{{number}}---{{ids}}---{{person}}
`,
// 定义组件中使用到的数据属性
data() {
return {
num: 0,
};
},
// 给组件添加属性
props: {
number: "",
// 数组属性
ids: [],
// 对象属性
person: {}
},
};
// 注册：全局注册
// "组件名称",具体组件
Vue.component("aaa", aaa);
var vm = new Vue({
el: "root",
// 定义父组件的数据
data: {
count: 5,
arr: [1, 2, 3],
p: { username: "mkbk", age: 23 },
},
});
script>
body>
html>
3.子组件向父组件通信
子组件调用父组件的方法，进而影响到父组件中的数据
<div id="app">
<h1>父组件中:app_num={{app_num}}h1>
<counter @aaa="add" @bbb="rem" :counter_num="app_num">counter>
div>
<script>
//定义一个组件(模版)
let counter = {
template: `
子组件中:counter_num={{counter_num}}
`,
props:{
//定义属性counter_num,用来接收父组件传递的数据
counter_num:null,
//定义aaa属性,用来绑定父组件的方法,当然,该定义也可以省略
aaa:function(){},
//定义bbb属性,用来绑定父组件的方法,当然,该定义也可以省略
bbb:function(){},
},
methods:{
fun1(){
//找到aaa属性所绑定的那个方法,执行那个方法
return this.$emit("aaa");
},
fun2(){
//找到bbb属性所绑定的那个方法,执行那个方法
return this.$emit("bbb");
}
}
}
var app = new Vue({
el: '#app',
data: {
app_num: 0
},
components: {
counter
},
methods:{
add(){
this.app_num++;
},
rem(){
this.app_num--;
}
}
});
script>
4.组件的嵌套
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>组件的嵌套title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
学生姓名：{{name}}
学生年龄：{{age}}
`,
data(){
return {
name:'123',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
学校名称：{{name}}
学校地址：{{address}}
{{msg}}
`,
data(){
return {
msg:'welcome'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
5.单文件组件
意义：需避免单个界面的功能过于复杂的情况
作用：复用编码，简化项目编程，提高运行效率
- School.vue:
<template>
<div id='Demo'>
<h2>学校名称：{{name}}h2>
<h2>学校地址：{{address}}h2>
<button @click="showName">点我提示学校名button>
div>
template>
<script>
export default {
name:'School',
data() {
return {
name:'123',
address:'123'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
script>
<style>
#Demo{
background: orange;
}
style>
- Student.vue:
<template>
<div>
<h2>学生姓名：{{name}}h2>
<h2>学生年龄：{{age}}h2>
div>
template>
<script>
export default {
name:'Student',
data() {
return {
name:'JOJO',
age:20
}
},
}
script>
- App.vue:
<template>
<div>
<School>School>
<Student>Student>
div>
template>
<script>
import School from './School.vue'
import Student from './Student.vue'
export default {
name:'App',
components:{
School,
Student
}
}
script>