1.props 2. $emit 3. $root.eventHub 4.vuex 5. refs 6. $children
1：父传子 props
<template>
<div>
<div id="app">
<!-- 向子组件传递信息 -->
<helloWorld msg='hello world'></helloWorld>
</div>
</div>
</template>
<script>
//引入组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name:'Fujian',
components:{
HelloWorld
}
};
</script>
<template>
<div class="hello">
<h1>
<!-- 显示父组件传过来的参数 -->
{
{
msg}}
</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// 使用props接收参数
props: {
msg: String // 值为字符串
}
}
</script>
1. 子传父 $emit
<template>
<div class="hello">
<!-- 点击按钮后给父组件传参 -->
<button @click="send"> 向父组件发送</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return{
msg: '我是子组件内容a'
}
},
methods: {
send(){
this.$emit('getchild',this.msg,'我是子组件内容b')
}
}
}
</script>
<template>
<div>
<div id="app">
<!-- 自定义事件getchild -->
<helloWorld @getchild='getdata'></helloWorld>
</div>
</div>
</template>
<script>
//引入组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name:'Fujian',
components:{
HelloWorld
},
methods: {
//点击按钮后 接收参数
getdata(m,n) {
// 后台打印出两个参数
console.log(m)
console.log(n)
}
}
};
</script>
3. 兄弟传参 $root.eventHub
- main.js文件
new Vue({
router,
store,
data() {
eventHub: new Vue() // 创建一个全局的eventHub对象 作为两个组件中转站
},
render: h => h(App)
}).$mount('#app')
<template>
<div class="hello">
我是HelloWorld
<button @click="send">点击传参</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
methods: {
data() {
return {
};
},
send() {
//触发getdata事件，向b组件传值
this.$root.eventHub.$emit("getdata", "我是组件A的内容");
},
},
};
</script>
<template>
<div>我是HelloVue{
{
msg}}</div>
</template>
<script>
export default {
name: "hellovue",
data() {
return {
msg:''
};
},
created() {
// 接收A组件传过来的内容
this.$root.eventHub.$on('getdata',(n)=>{
console.log('我是组件b 我接受到了'+n)
this.msg = '-----'+n
})
}
};
</script>
3. vuex传参 （所有组件都可用）
- 将内容保存在vuex中 在需要的情况下获取vuex
- 储存vuex 需要打开store文件夹中的index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: '内容A'
},
mutations: {
},
actions: {
},
modules: {
}
})
<template>
<div>
{
{
getdata}}
</div>
</template>
<script>
export default {
name:'A',
computed: {
getdata() {
return this.$store.state.msg
}
}
}
</script>
inxex.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: '内容A'
},
mutations: {
//修改后的的内容赋值给content
alter(state,content) {
state.msg = content
}
},
actions: {
},
modules: {
}
})
<template>
// 点击后修改vuex内容 A组件也会发生改变
<div><button @click="add">点击修改</button></div>
</template>
<script>
export default {
name: "B",
data() {
return{
msg:'内容B'
}
},
methods: {
add() {
this.$store.commit('alter',this.msg) //需要commitl来修改vuex内容 alter 是mutations里的函数
}
},
};
5. refs 子传父
<template>
<div>
<div id="app">
{
{
msgs}}
<button @click="getdata">点击获取A组件的值</button>
<A ref="com"></A>
</div>
</div>
</template>
<script>
//引入组件
import A from "@/components/A.vue";
export default {
name: "Fujian",
components: {
A
},
data() {
return{
msgs:'我是父组件'
}
},
methods: {
getdata() {
this.msgs = this.$refs.com.msg // refs 获取
}
}
};
</script>
<template>
<div>
{
{
msg}}
</div>
</template>
<script>
export default {
name:'A',
data() {
return{
msg:'我是子组件'
}
},
}
</script>
6.$children 父向子传参
<template>
<div>{
{
msg}}</div>
</template>
<script>
export default {
name:'A',
data() {
return{
msg:'我现在事没发生改变的是A组件'
}
},
methods: {
geta(value) {
console.log(value)
this.msg = value
}
}
}
</script>
<template>
<div>
<div id="app">
<button @click="getadd">点击获取A组件</button>
<A></A>
</div>
</div>
</template>
<script>
//引入组件
import A from "@/components/A.vue";
export default {
name: "Fujian",
components: {
A
}，
methods: {
getadd() {
this.$children[0].geta('我变了')//获取children的geta函数传参
}
}
};
</script>