前言
不积跬步,无以至千里;不积小流,无以成江海。
目标
掌握基本组件通信
关键字
props,$emit,components
一、定义
使用对应的关键字实现组件之间的通用。
二、、使用及场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 父模块向自子模块 -->
<topo :num="num" :users="users" ></topo>
<br/>
<br/>
<br/>
<!-- 子模块向父模块 -->
<topo :count="num" @inc="increment" @dec="decrement" ></topo>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//模块之间的通讯父模块向自子模块,子模块向父模块
// #父模块向自子模块通讯
//1 props -> 通过props来接收一个父组件传递的属性
//2 绑定父模块属性
// 2.1 方式1 <topo v-bind:num="222" v-bind:users="[ {id:1, name: '张三'}]" ></topo>
// 2.2 方式1 <topo :num="num" :users="users" ></topo>
// # 子模块向父模块(vue提供了一个内置的this.$emit函数,用来调用父组件绑定的函数)
// 场景子模块变化联动父模块变化
// 1 子模块创建methods方法,this.$emit("inc")调用父模块, //inc可以随意变化
// 2 在<topo :count="num" @inc="increment" @dec="decrement" ></topo> 调用父函数
//局部模块
const topoTemplate = {
template:`<div>
<h1>{{num}}局部全局模块</h1>
<ul>
<li v-for="user in users">{{user.id}} : {{user.name}}</li>
</ul>
<button @click="plus">增加</button>
<button @click="reduce">减少</button>
</div>
`,
data(){
return {
count:2
}
},
props: { // 通过props来接收父组件传递来的属性
title: String,
num: Number,
isPublished: Boolean,
users:{// 这里定义users属性
type:Array,// 要求必须是Array类型
default:[] // 如果父组件没有传,那么给定默认值是[]
},
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
},
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
}
//vue实例
new Vue({
el:"#app",
data:{
num:20,
users:[
{id:1, name: '张三'},
{id:2, name: '李四'},
{id:3, name: '王五'},
]
},
//实例化局部模块 两不能一样要不然初始化会失败 topo:topoTemplate
components:{
topo:topoTemplate
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
});
</script>
</body>
</html>
参考
vue官方文档
https://cn.vuejs.org/v2/guide/components-props.html
多留言多点赞你们的只支持是我坚持下去的动力,都支棱起来!!!