一、props和$emit
1. props(父组件向子组件传值)
个人理解:就是子组件自定义个属性,父组件在使用子组件时候调用这个属性同时给予属性值
第一步:在子组件中声明一个属性props(传递的数据是属于父组件的,所以不建议在子组件中修改,并且通常认为props是只读的)
var login = {
props: ['message'],
template: "#login",
//data中的数据拥有者是孩子本身,所以子组件可读可写
data() {
return {
name:"哈哈,我叫login子组件"
}
},
第二步:在父组件页面中,使用子组件的时候把值传递给子组件
<div id="app">
<login :message="msg"></login>
</div>
第三步:然后就可以在子组件使用了,使用方法和本身的data数据一样
2、$emit(子组件向父组件传值)
个人理解:父组件自定义个方法并且在使用子组件时候绑定,子组件用$emit触发这个方法同时传递参数
第一步:在父组件的方法属性里声明一个方法(统称方法A)用于接收子组件传过来的值
//父组件
var vm = new Vue({
el: "#app",
data: {
childMsg:""
},
methods: {
//1.子组件给父组件传递数据第一步:在父组件中声明一个方法用于接收子组件传递的数据
receiveFromChild(msg){
this.childMsg = msg;
}
},
components: {
login
}
})
第二步:在父组件页面使用子组件的时候,给子组件绑定个事件用来调用方法A;
<div id="app">
这是App组件 {{childMsg}}
<!--2.在父组件中使用子组件的时候把刚才声明的方法传递给子组件-->
<login @funcd="receiveFromChild"></login>
</div>
第三步:在子组件中使用$emit触发上面绑定的事件,同时传递参数
//子组件
var login = {
template: "#login",
data() {
return {
name: "哈哈,我叫login子组件"
}
},
methods: {
//3.在子组件的方法中触发父组件传递过来的方法,从而给父组件传递数据
sendMsg(){
this.$emit("funcd",this.name);
}
}
}
二 、中央事件总线(eventBus)
第一步:创建中央事件总线(创建一个空的vue实例)
var bus = new Vue();
第二步:使用bus.$emit发送数据
bus.$emit('sendFromLogin', "哈哈,我是login");
第三步:使用bus.$on来接收数据
bus.$on("sendFromLogin", function (msg) {
console.log(msg)
})
三 、provide和inject(父——>子)
第一步:通过provide向孩子们(孩子的孩子们)暴露数据
//父组件
var vm = new Vue({
el: "#app",
data: {},
methods: {},
components: {
com1//子组件
},
//通过provide向孩子们(孩子的孩子们)暴露数据
provide() {
return {
msg:"来自父亲的东西"
}
}
})
第二步:在孩子中通过inject来注入vm实例中暴露出来的数据
//子组件
var com1 = {
template: "#tmpl",
//在孩子中通过inject来注入vm实例中暴露出来的数据
inject:['msg'],
}
四 、ref / $refs
第一步:在要传递值的组件上使用ref=“值/名”标记
<div id="app">
这是App组件
<span ref="span">这是span</span>
<login ref="log" :message="msg"></login>
</div>
<template id="login">
<div>
<h1>这是登陆组件</h1>
<h4 ref="h4">{{name}}</h4>
</div>
</template>
//子组件
var login = {
props: ['message'],
template: "#login",
data() {
return {
name:"哈哈,我叫login子组件"
}
},
methods: {
},
mounted(){
console.log("子组件",this.$refs.h4); //哈哈,我叫login子组件
//获取到子组件的父亲中的span这个ref的引用
console.log("子组件",this.$parent.$refs.span); //这是span
}
}
第二步:在要获取值的组件中使用,类似于DOM中class、id的使用
//父组件
var vm = new Vue({
el: "#app",
data: {
msg: "app组件的数据"
},
methods: {
},
mounted(){
console.log(this.$refs.span);//这是span
console.log(this.$refs.log.h4);//<h4 ref="h4">{{name}}</h4>
console.log(this.$refs.log.$refs.h4);//哈哈,我叫login子组件
},
components: {
login
}
})
五 、$children / $parent
六 、Vuex
[参考网址](https://blog.csdn.net/qq_38910842/article/details/103174870?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158443345419725222425702%2522%252C%2522scm%2522%253A%252220140713.130056874..%2522%257D&request_id=158443345419725222425702&biz_id=0&utm_source=distribute.pc_search_result.none-task)