什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：
模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
全局组件定义的三种方式
这里讲一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 调用全局组件 -->
<login-com></login-com>
<register-com></register-com>
</div>
<script src="./js/vue.js"></script>
<script>
// 全局组件有三种
Vue.component('login-com', {
template: `<h1>这是我们的login组件 </h1>`//html模板内容
})
Vue.component('register-com', {
template: `<h1>这是我们的register组件 </h1>`//html模板内容
})
var vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 调用全局组件 -->
<!-- <my-button></my-button>
<my-button></my-button>
<my-button></my-button> -->
<mybtn></mybtn>
<mybtn></mybtn>
<mybtn></mybtn>
<mybtn></mybtn>
<mybtn></mybtn>
</div>
<script src="./js/vue.js"></script>
<script>
// 一般格式为xx-xxx，使用时也是这样的
// Vue.component('my-button', {
// template: `<button @click="num++">这是点击我第{{num}}次 </button>`,//html模板内容
// data :function(){//data是一个函数才能复用
// return{
// num:0
// }
// }
// })
var mybtn = {
template: `<button @click="num++">这是点击我第{{num}}次 </button>`,//html模板内容
data: function () {//data是一个函数才能复用
return {
num: 0
}
}
}
var vm = new Vue({
el: "#app",
data: {},
components: {//注册局部组件
mybtn//等同于'mybtn':mybtn
}
})
</script>
</body>
</html>
组件之间的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="onOff = !onOff">
<!-- 调用全局组件 -->
<login-com v-if="onOff"></login-com>
<registe-com v-else></registe-com>
</div>
<script src="./js/vue.js"></script>
<script>
// 一般格式为xx-xxx，使用时也是这样的
Vue.component('login-com', {
template: `<h1>这是个组册组件 </h1>`,//html模板内容
})
Vue.component('registe-com', {
template: `<h1>这是个登陆组件 </h1>`,//html模板内容
})
var vm = new Vue({
el: "#app",
data: {
onOff: true
},
})
</script>
</body>
</html>
父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<login :title="msg"></login>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('login', {
template: "<h1>dsfsdfsdf---{{num}}--- {{title}}</h1>",
data() {
return {
num: 123
}
},
props: ['title']//传值
})
var vm = new Vue({
el: "#app",
data: {
msg: 'fdsfdsf'
}
})
</script>
</body>
</html>
子组件项父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<son @func='show'></son>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('son', {
template: "<button @click='sendMsg(num)'>dsfsdfsdf---</button>",
data() {
return {
num: 123
}
},
methods: {
sendMsg() {
this.$emit('func', this.num)//第一个参数是需要触发当前组件身上的函数，第二个参数是要发送的数据
}
},
})
var vm = new Vue({
el: "#app",
data: {
msg: 'fdsfdsf'
},
methods: {
show(val) {
console.log(val + '-----')
}
}
})
</script>
</body>
</html>
ref获取数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="getMag">获取某元素的内容</button>
<h1 ref="myh1">asda<p>啊大沙发沙发</p></h1>
</div>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'fdsfdsf'
},
methods:{
getMag(){
console.log('innerHtml'+this.$refs.myh1.innerHTML);
console.log('innerText'+this.$refs.myh1.innerText);
}
}
})
</script>
</body>
</html>
网友评论