组件
概念
html,css和js的集合体,可以提高代码的复用性
分类
根组件:new Vue()生成的组件
局部组件:let 组件名={} , {}中填写vue语法,并需要在根组件中注册使用
全局组件:Vue.component('组件名',{}), {}内部使用vue语法
特点
-
每一个组件都是一个vue实例
-
每一个组件都具有自身的模板template,根组件的模板就是挂载点的html,
-
template有且只有一个根标签
-
子组件的数据需要隔离(数据组件化,每个组件拥有自己的名称空间)
-
组件中出现的所有变量(模板,变量),由该组件自己提供.而变量名
-
父组件中出现的所有变量,由父组件提供
根组件
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({
el: '#app', // 被组件 template 模块进行替换的占位符
data: {
msg: '组件信息'
},
template: '<p>{{ msg }}</p>'
})
</script>
// 总结：根组件，可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换
// 解释：html，body标签不能被替换，所以不能作为挂载点
局部组件
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
template:`
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>beauty</h2>
</div>
`,
methods:{
fn(){
console.log(this)
}
}
}
new Vue({
el:"#app",
data:{},
//注册局部组件
components:{
//相当于localTag=localTag,
//当变量名=变量值的时候,可以只写一个来简化表示
localTag,
}
})
</script>
全局组件
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component("global-tag",{
template:`
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>leg</h2>
</div>
`,
methods:{
fn(){
console.log(this)
}
}
});
new Vue({
el:"#app",
data:{},
//注册局部组件
components:{
//相当于localTag=localTag,
//当变量名=变量值的时候,可以只写一个来简化表示
localTag,
}
})
</script>
组件传参
父传子
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,h2 {
margin: 0;
}
.wrap {
880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
200px;
height: 240px;
}
.box h2 {
text-align: center;
font-size: 20px;
font-weight: normal;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
//v-for="dog in dogs"在这里控制了渲染local-tag组件的次数
<local-tag v-for="dog in dogs" :dog="dog"></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
},
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
}
];
let localTag = {
props:['dog'],
template:`
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>打{{dog.name}}{{count}}次</h2>
</div>
`,
data (){
return{
count:0,
}
},
methods:{
fn(){
this.count++;
}
},
};
new Vue({
el:"#app",
data:{
dogs,
},
components:{
localTag,
}
})
</script>
父组件中使用自定义方法传入变量:dog="dog"
子组件中就可以通过template接收,方法fn同理.
父传给子的属性值,只可以用,不可以改
子传父
父类中自定义方法无法自动触发,必须手动触发
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<!--自定义组件标签的事件
自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)
子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息
-->
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容：<input type="text" v-model="s1" @input="t1Fn">
子标题内容：<input type="text" v-model="s2">
</div>
`,
data() {
return {
s1: '',
s2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.s1);
}
},
watch: {
s2 () {
this.$emit('h3a', this.s2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
let的子组件中的自定义事件(changeTitle)是属于子组件的,子组件在父组件中渲染并绑定事件方法(action),通过父组件定义方法来实现.
子组件触发自定义事件:this.$emit("自定义事件名",触发事件需要传入的参数们)
子组件触发自定义事件,将参数传给父组件方法,通过父组件自定义事件的方法,就可以拿到子组件传递给父组件的数据.