1、prop传值(父传子)
父组件
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
子组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
};
</script>
2、$emit(子传父 派发者模式)
子组件
<template>
<div class="hello">
<!-- 派发者为子组件本身 -->
<h1 @click="$emit('mua', foo)">{{ msg }}</h1>
{{ foo }}
</div>
</template>
父组件
<template>
<div id="app">
<!-- 派发者模式,派发者也是监听者。 -->
<HelloWorld @mua="mua($event)" msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
methods: {
mua(data) {
console.log(data, 'data');
}
},
}
</script>
3、$children传值(父传子)
父组件
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
},
mounted() {
this.$children[0].foo = '111';
},
}
</script>
子组件
<template>
<div class="hello">
{{ foo }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
foo: 'bar',
};
},
</script>
$children 获取当前实例的直接子组件 。需要注意 $children 并不保证顺序,也不是响应式的。
如果你发现自己正在尝试使用 $children 来进行数据绑定,
考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。
注意1:注意当期实例是指这个文件下的实例。直接子组件是指这个文件下的直接子组件。
如果子组件中还有子组件则孙子组件不能算直接子组件。
注意2:缺点:需要通过索引才能拿到自己想要的子组件,如果删除了某个子组件,会影响到子组件的结果,所以在实际的开发中比较少用
因此使用这个属性的时候一定要慎之又慎。
4、$parent(兄弟组件传值)
子组件
<template>
<div class="hello">
<h1 @click="$parent.$emit('mua')">{{ msg }}</h1>
</div>
</template>
兄弟组件
<script>
export default {
name: 'HelloWorld',
mounted() {
this.$parent.$on('mua', () => {
console.log('mua');
})
},
}
</script>
5、provide、inject(父组件向孙组件传值)
父组件
<script>
export default {
name: 'App',
// provide可以是一个对象属性,但是为了避免污染全局,最好是使用函数的方式,抛出一个对象。
provide() {
return {
feng: '1111'
}
},
}
</script>
孙组件
<template>
<div class="hello">
<h1>{{ feng }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorldThree',
// 如果希望provide传的值是一个动态的话,inject这里最好是使用computed属性来动态计算
inject: ['feng'],
}
</script>
注意:provide、inject一般传的都是常量的值,因此,一般都作为组件开发时,使用的属性,平常业务开发的话,不是很适合用来祖孙之间
动态传递数据。
6、Bus传值(父子、祖孙、兄弟组件之间传值)
传值组件
<template>
<div class="hello">
<span @click="sendMsg">{{ foo }}</span>
</div>
</template>
<script>
import Bus from '../Bus/index';
export default {
name: 'HelloWorld',
data() {
return {
foo: 'bar',
};
},
methods: {
sendMsg() {
Bus.$emit('getMsg', this.foo);
},
},
}
</script>
监听组件
<script>
import Bus from './Bus/index';
export default {
name: 'App',
mounted() {
Bus.$on('getMsg', (e) => {
console.log(e, 'getMsg');
})
},
beforeDestroy() {
Bus.$off('getMsg');
},
}
</script>
Bus函数的通讯方式,相当于封装了一个全局使用的Vue的实例,可以在其余组件内监听对应属性的变化,然后再进行其余的操作,但是要注意,
为了避免属性全局污染,在使用过后一定要记得bus.$off('监听的属性') 来关闭监听。
7、Vuex通讯(当前Vue实例生命周期内所有已激活组件内相互传值)
Vuex的状态管理是vue框架的一大特色,使用文档网上很多,不仅仅是只用来做组件之间的通讯的。可以看我其余的文档。里面对Vuex的属性、使用等,都有详细的说明:
或者可以参考文档 https://blog.csdn.net/qq_56989560/article/details/124706021 进行简单的配置使用