1.组件的介绍和使用
组件中是可以套组件的
组件就是：扩展 HTML元素，封装可重用的代码，目的就是复用
例如：
有一个轮播图，可以在很多页面中使用，一个轮播有js，css，html
组件把js，css，html放到一起，有逻辑，有样式，有html
组件的分类：
- 全局组件：可以放在根中，可以在所有组件中使用
- 局部组件：只能在当前组件中使用
1.1 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h5>使用组件</h5>
<hr>
<child></child>
<hr>
<h5>第二次使用</h5>
<child></child>
</div>
</body>
<script>
// 定义一个全局组件：组件名,{样式，数据，方法。。。}
Vue.component('child', {
template: ` <div>
<button @click="back">后退</button>
{{ title }}
<button>前进</button>
</div>`,
data() {
return {
title: '首页'
}
},
methods:{
back(){
console.log('后退')
},
forward() {
console.log('前进')
}
}
})
var vm=new Vue({
el:'#app',
})
</script>
</html>
结果：
1.2 局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h5>组件的使用</h5>
<hh></hh>
</div>
</body>
<script>
// Vue可以称为根组件
var vm = new Vue({
// 局部组件只能在这个el中使用
el: '#app',
data: {},
// 局部组件定义在其他组件的内部,只能在父组件中使用，不能到别的地方使用
components: {
'hh': {
template: `
<div>
<h5>局部组件</h5>
<img :src="url" alt="" height="400px" width="400px">
</div>`,
data() {
return {
url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
}
},
methods: {}
}
}
})
</script>
</html>
结果：
还可以这样定义局部组件：通过变量的形式定义
局部组件和全局组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h5>使用组件</h5>
<hh></hh>
<hr>
<child></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件：组件名,{样式，数据，方法。。。}
Vue.component('child', {
template: ` <div>
<button @click="back">后退</button>
{{ title }}
<button>前进</button>
</div>`,
data() {
return {
title: '首页'
}
},
methods:{
back(){
console.log('后退')
},
forward() {
console.log('前进')
}
}
})
// 定义局部组件:通过变量的形式定义
var hh = {
template: `
<div>
<h5>局部组件</h5>
<img :src="url" alt="" height="400px" width="400px">
</div>`,
data() {
return {
url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
}
},
methods: {}
}
var vm=new Vue({
el:'#app',
components:{
hh
}
})
</script>
</html>
结果：
局部组件只能在根组件中使用
组件总结：
1. 全局组件是使用Vue.component定义的，可以在全局任意组件中使用
2. 局部组件是定义在某个组件内的：components，只能用在当前组件中
3. 组件可以嵌套定义和使用
# 扩展：elementui,提供给咱们很多全局组件，可以引入使用
2. 组件间通信
组件嵌套：
- 父组件被数据传递给子组件
- 自定义属性：
1. 在子组件中 自定义属性，使用属性指令绑定父组件的变量
2. 在子组件中，使用props接收：['属性名'，'属性名2']
3. 在子组件中，使用属性名即可
- 子组件把数据传递给父组件
- 自定义事件：
2.1 组件间通信值父传子
- 通过自定义属性（可以写多个）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>组件的使用</h1>
<hr>
<!--这样写myshow是字符串类型-->
<!-- <hh :murl="url" myshow="true"></hh>-->
<!--绑定属性，myshow是布尔类型-->
<hh :murl="url" :myshow="true"></hh>
<hr>
</div>
</body>
<script>
// 定义一个局部组件
var hh = {
template: `
<div>
<h5>局部组件</h5>
<!--这边绑定的也是自定义的属性：murl-->
<img :src="murl" alt="" height="400px">
<button @click="handleCheck">点我看myshow类型</button>
</div>`,
data() {
return {}
},
methods: {
handleCheck(){
console.log(this.myshow)
console.log(typeof this.myshow)
}
},
// 通过props拿到url
props: ['murl','myshow']
}
// 根组件，父组件中有图片地址
var wm = new Vue({
el: '#app',
data: {
url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg'
},
// 局部组件是定义在某个组件内,可以定义多个,只能在它父组件中使用，不能到别的地方使用
components: {
hh,
}
})
</script>
</html>
结果：
-1. 在父组件的data中存放：url：图片地址
-2. 在子组件的标签中自定义属性并绑定url
- 3. 在子组件中使用props接收自定义属性：props:['自定义属性']
-4 自定义的属性不需要再data中定义了
自定义属性myshow的类型：
<hh :murl="url" myshow="true"></hh>：字符串
<hh :murl="url" :myshow="true"></hh>：布尔类型
2.2 组件间通信之子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h4>组件的使用</h4>
接收到的子组件输入的内容是：{{username}}
<hr>
<!--自定义事件：handleEvent，写在父组件中-->
<hh @myevent="handleEvent"></hh>
<hr>
</div>
</body>
<script>
var hh={
template: `
<div>
<h5>局部组件</h5>
<img :src="url" alt="" height="400px">
<br>
<input type="text" v-model="username"><button @click="handleSend">传递到父组件</button>
</div>`,
data() {
return {
url: 'http://pic.imeitou.com/uploads/allimg/230331/7-230331110I0.jpg',
username: '',
}
},
methods:{
handleSend(){
// 传给父组件里面写自定义事件的名字
this.$emit('myevent',this.username)
}
}
}
var vm=new Vue({
el:'#app',
data:{
username:'',
},
methods:{
// 自定义事件,写在父组件中,这里的username是子组件传递过来的
handleEvent(username){
console.log('父组件自定义事件的event执行了')
console.log(username) //这里是子组件传递的username、
this.username=username // 将接收到子组件传递的username给了父组件中的username
}
},
components:{
hh
}
})
</script>
</html>
结果：
流程：
标签：username,vue,自定义,Vue,使用,组件,data From： https://www.cnblogs.com/Lucky-Hua/p/17715332.html