一、介绍：
1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
2) 分组分为根组件、全局组件与局部组件
根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件 ；
全局组件：不用注册，就可以成为任何一个组件的子组件 ；
局部组件：必须注册，才可以成为注册该局部组件的子组件 。
3) 每一个组件都有自身的html结构，css样式，js逻辑
每一个组件其实都有自己的template，就是用来标识自己html结构的 ；
template模板中有且只有一个根标签 ；
根组件一般不提供template，就由挂载点的真实DOM提供html结构。
二、组件：
1、根组件
在Vue内增 template：·<div> </div>·
2、局部组件
1）创建局部组件
2）在父组件中注册该局部组件
3）在父组件中的template模板中渲染该局部组件
</head>
<body>
<div id="app">
<!--<mcc></mcc>-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 渲染
let localTag = {
template: `
<div class="box">
<img src="img/666.jpg" alt="">
<h3>title</h3>
<p>text</p>
</div>
`
};
new Vue({
el: ‘#app‘,
components: { // 注册
// mcc: localTag,
// localTag,
‘local-tag‘: localTag,
}
})
</script>
3、全局组件
1）创建全局组件
2）在父组件的template模板中直接渲染该全局组件
全局组件与数据隔离
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件
Vue.component(‘global-tag‘, {
template: `
<div class="box" @click="action">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫?{{ num }}</p>
</div>
`,
data () {
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
});
// 数据局部化分析导入
// a = function () {
// return {num: 10}
// };
// b1 = a();
// b2 = a();
// b3 = a();
new Vue({
el: ‘#app‘,
})
</script>
</html>
三、组件交互
1、父传子
// 数据交互 - 父传子 - 通过绑定属性的方式 // 1) 父组件提供数据 // 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 // 3) 在子组件实例中，通过props实例成员获得自定义属性
<style>
.info {
text-align: center;
width: 200px;
padding: 3px;
box-shadow: 0 3px 5px 0 pink;
float: left;
margin: 5px;
}
.info img {
width: 200px;
}
</style>
<div id="app">
<!-- 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值由父组件提供 -->
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
<script src="js/vue.js"></script>
<script>
// 伪代码：模拟数据从后台请求
/*
let infos = ‘‘;
document.onload = function () {
$.ajax({
url: ‘/images/‘,
type: ‘get‘,
success (response) {
infos = response.data
}
})
};
*/
let infos = [
{
image: ‘img/001.png‘,
title: ‘小猫‘
},
{
image: ‘img/002.png‘,
title: ‘蛋糕‘
},
{
image: ‘img/003.png‘,
title: ‘蓝糕‘
},
{
image: ‘img/004.png‘,
title: ‘恶犬‘
},
];
let info = {
template: `
<div class="info">
<img :src="myinfo.image" >
<p><b>{{ myinfo.title }}</b></p>
</div>
`,
// 3) 在子组件实例中，通过props实例成员获得自定义属性
props: [‘myinfo‘]
};
new Vue({
el: ‘#app‘,
components: {
info,
},
data: {
infos, // 1) 父组件提供数据
}
})
</script>
2、子传父
// 组件交互-子传父 // 1) 数据由子组件提供 // 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 // 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
<style>
.close:hover {
cursor: pointer;
color: red;
}
</style>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button @click="sendMsg">留言</button>
</p>
<ul>
<!-- 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来 -->
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let msgLi = {
template: `
<li>
<span class="close" @click="deleteMsg(index)">x </span>
<span>第{{ index + 1 }}条：</span>
<span>{{ msg }}</span>
</li>
`,
props: [‘msg‘, ‘index‘],
methods: {
// 系统的click事件
deleteMsg(i) {
// 1) 数据由子组件提供
// $emit(‘自定义事件名‘, 参数们)
this.$emit(‘remove_msg‘, i);
}
}
};
new Vue({
el: ‘#app‘,
data: {
msgs: [],
userMsg: ‘‘
},
methods: {
sendMsg() {
if (this.userMsg) {
this.msgs.push(this.userMsg);
this.userMsg = "";
}
},
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
removeAction(i) {
this.msgs.splice(i, 1)
}
},
components: {
msgLi
}
})
</script>
原文地址：https://www.cnblogs.com/xiaowangba9494/p/11645125.html
时间： 2024-11-21 05:47:46