12月12
先来看看Vue3的几种组件通信方式:
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法:
1、props
[codes=c#]
父组件
子组件
[/codes]
2、$emit
父组件
[codes=c#]
子组件
[/codes]
3、expose / ref
父组件
[codes=c#]
子组件
[/codes]
4、attrs
父组件
[codes=c#]
子组件
[/codes]
5、v-model
父组件(v-model可省略)
[codes=c#]
子组件
[/codes]
6. provide / inject
父组件
[codes=c#]
子组件
[/codes]
接下来是Vue2.x 组件通信使用方法:
1、 props
父组件
[codes=c#]
子组件
export default {
props:{
msg:{
type:String,
default:'这是默认数据'
}
},
mounted(){
console.log(this.msg)
}
[/codes]
2、.sync
[codes=c#]
父组件
[/codes]
3、v-model
[codes=c#]
父组件
[/codes]
4、ref
[codes=c#]
子组件
export default {
data(){
return {
name:""
}
},
methods:{
someMethod(msg){
console.log(msg)
}
}
}
父组件
[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
data(){
return { msg: "这是发给父组件的信息" }
},
methods: {
handleClick(){
this.$emit("sendMsg",this.msg)
}
},
}
父组件
// 或 简写
export default {
methods:{
getChildMsg(msg){
console.log(msg) // 这是父组件接收到的消息
}
}
}
6、children/parent
[codes=c#]
父组件
export default{
mounted(){
this.$children[0].someMethod() // 调用第一个子组件的方法
this.$children[0].name // 获取第一个子组件中的属性
}
}
子组件
export default{
mounted(){
this.$parent.someMethod() // 调用父组件的方法
this.$parent.name // 获取父组件中的属性
}
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ,然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()
// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex(这个就不举例子了........懂的都懂!)
[codes=c#]
props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
[/codes]
下面分别介绍这几种方式的写法:
1、props
[codes=c#]
父组件
子组件
[/codes]
2、$emit
父组件
[codes=c#]
子组件
[/codes]
3、expose / ref
父组件
[codes=c#]
子组件
[/codes]
4、attrs
父组件
[codes=c#]
子组件
[/codes]
5、v-model
父组件(v-model可省略)
[codes=c#]
子组件
[/codes]
6. provide / inject
父组件
[codes=c#]
子组件
[/codes]
接下来是Vue2.x 组件通信使用方法:
1、 props
父组件
[codes=c#]
子组件
export default {
props:{
msg:{
type:String,
default:'这是默认数据'
}
},
mounted(){
console.log(this.msg)
}
[/codes]
2、.sync
[codes=c#]
父组件
[/codes]
3、v-model
[codes=c#]
父组件
[/codes]
4、ref
[codes=c#]
子组件
export default {
data(){
return {
name:""
}
},
methods:{
someMethod(msg){
console.log(msg)
}
}
}
父组件
[/codes]
5、$emit / v-on
[codes=c#]
子组件
export default {
data(){
return { msg: "这是发给父组件的信息" }
},
methods: {
handleClick(){
this.$emit("sendMsg",this.msg)
}
},
}
父组件
// 或 简写
export default {
methods:{
getChildMsg(msg){
console.log(msg) // 这是父组件接收到的消息
}
}
}
6、children/parent
[codes=c#]
父组件
export default{
mounted(){
this.$children[0].someMethod() // 调用第一个子组件的方法
this.$children[0].name // 获取第一个子组件中的属性
}
}
子组件
export default{
mounted(){
this.$parent.someMethod() // 调用父组件的方法
this.$parent.name // 获取父组件中的属性
}
}
[/codes]
7、EventBus
[codes=c#]
// 方法一
// 抽离成一个单独的 js 文件 EventBus.js ,然后在需要的地方引入
// EventBus.js
import Vue from "vue"
export default new Vue()
// 方法二 直接挂载到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()
[/codes]
8、Vuex(这个就不举例子了........懂的都懂!)