Vue2组件通讯传值

方法

  • Slot插槽--父向子内容分发,子组件只读
  • mixin混入--定义公共变量或方法,mixin数据不共享,组件中mixin实例互不影响
  • provide+inject--依赖注入,加强版prop+$emit ,代码可读性不高,不便后期维护
  • prop+$emit--父往子,子往父
  • route路由传参--简单数据传值
  • ref传值-- 缺陷:ref不是响应式的,要在DOM渲染完后才会有,可以用$nextTick()解决
  • $parent+$children-- 获取到整个组件实例的方法+数据
  • $attrs+$listeners-- 实现多层嵌套传递,父子孙
  • 事件总线eventBus-- 利用vm实例实现,$on绑定事件后最好在组件销毁前解绑($off)
  • Vuex/pinia(Vue3)--重复使用数据多,数据共享,可实现孙子,子孙传值

slot插槽

#具名插槽
父组件中:
<template v-slot:demo2>
<!--v-slot可简写成‘#’ <template #demo2>-->
<ul>
<li>我</li>
<li>爱</li>
<li>你</li>
</ul>
</template>
子组件中:
<slot name="demo1"></slot>
#作用域插槽
父组件中:
<Son>
<template scope="formSon">
<!-- dataSource来子组件 -->
<ul>
<li v-for="(k,index) in dataSource" :key="index">{{k}}</li>
</ul>
</template>
</Son>
子组件中:
<slot :dataSource="dataSource"></slot>
export default {
//数据在子组件自身
data() {
return {
dataSource:['lht','lht1','lht2','lht3']
}
},
}

Mixin混入

`创建mixin.js文件`
export defalut{
data(){
return{
egg:'aaa'
}
},
methods:{
dark(){
console.log(444)
}
}
}
`组件中导入`
import Mixin from './mixin.js'
export defalut{
Mixins:[Mixin],
data(){
return{ }
},
created(){
this.egg,// aaa
this.dark()// 444
}
}

provide+inject

#父组件中
export defalut{
data:{
return{
add:'我'
}
},
provide:{//传递静态值写法
foo:'我是静态值' //写出 foo:this.add 会报错
},
//或
provide(){//写法二
return(){
foo:this.add, //可以传递父组件的this
}
}
}
#子组件中
export defalut{
inject:['foo'],
mounted(){
console.log(this.foo) //我是静态值
//或
console.log(this.foo) // 我
}
}

prop+$emit

#父组件 father.vue
import Son from './son.vue'
<template>
<Son
:msg2=msg2
@trag='tragFa'
/>
</template>
export defalut{
commponent{
Son
},
data(){
return{
msg:'hhh',
msg2:'ooo'
}
},
methods:{
tragFa(data){
console.log(this.msg,data) //data来自子组件触发事件传递的值deleta
//打印 hhh aaaaa
}
}
}
#子组件 son.vue export defalut{
props:['msg2'],//从父组件获取的值
data(){
return{
delete:'aaaaa'
}
},
created(){
this.$emit('trag',this.delete) //子触发父组件上的事件,将子组件数据传递到父组件
console.log(this.msg2) //父传递到子的值(需要在父组件导入子组件的标签绑定)
//打印 ooo
}
} # .sync修饰符与this.$emit("update:事件名")
在父组件导入的子组件标签上调用自定义事件加入了修饰符.sync时,子组件内取触发的事件的写法改写成以下写法:
this.$emit("update:trag")

route路由传参

1.标签传参
<router-link :to="{path:'/login',query:{userId: "33333"}}"></router-link>
接收参数方法
接收参数用`this.$route.params.userId` 2.配置路由页面参数
(1)配置路径router //name一定要配置
export default new Router({
routes: [
{
path: '/testVueRouterTo',
name: 'TestVueRouterTo',
component: TestVueRouterTo
},
]
}) (2)this.$router.push传递 //跳转路由页面后传参--跳转前的页面
组件中:
this.$router.push({
name: `TestVueRouterTo`,
params: {
page: '1', code: '8989'
}
}) (3)this.$route接受参数 //跳转后的页面
this.$route.params.page ---- "1"
this.$route.params.code ---- "8989" #注意:
`路由传参不推荐使用,在项目中一般用动态生成路由配置文件,不需要自己去一一在Router中配置单个路由参数传参,
动态路由由后台生成不好去修改,也不好去维护`
简单说一下this.$router与this.$route区别,this.$router用于跳转路由页面,而this.$route则获取当前路由上的数据

ref传值

#父组件中 father.vue
<template>
<MySon
ref="son"
/>
</template>
import MySon from './son.vue'
export default{
commponent:{
MySon
},
data(){
return{
son:null
}
},
created:{
this.$nextTick(()=>{
this.son=this.$ref.son;//获取到子组件上所有方法和数据
console.log(this.$ref.son.name) //打印 'lht'
console.log(this.$ref.son.call()) //打印 'hhh'
})
}
} #子组件中 son.vue
export default{
data(){
return{
name:'lht',
sayHello:'hhh'
}
},
methods:{
call(){
console.log(this.sayHello)
}
}
}

$parent+$children

this.$children 是的一个数组,里面存放的是父组件中所有子组件实例,实例存放组件的方法和数据,this.$parent 也是一个数组
#父组件中 father.vue
<template>
<div>
<MySon
/>
<MyDau
/>
</div>
</template>
import MySon from "./components/Son.vue";
import MyDau from "./components/Dau.vue";
export default {
name: "Father",
components: {
MySon,
MyDau
},
data(){
return{
Name:'fa'
}
},
created(){
console.log(this.$children) //打印出Son.vue和Dau.vue实例 ,Arrary格式
console.log(this.$parent) //打印出App.vue根实例
}
}
#子组件中 MySon.vue
export default {
name: "MySon",
created(){
console.log(this.$parent) //打印出Father.vue根实例
},
data(){
return{
Name:'son'
}
}
}
#子组件2中 MyDau.vue
export default {
name: "MyDau",
created(){
console.log(this.$parent) //打印出Father.vue根实例
},
data(){
return{
Name:'dau'
}
}
}

事件总线EventBus

局部事件总线

A组件往B组件传值
event-Bus.js //定义eventBus 创建event-Bus.js
import Vue from 'vue'
export const eventBus=new Vue() A组件 //Acon.vue
<input v-model="Amsg">
<button @click="sendMsg()">点一下</button>
import eventBus from './event-Bus.js'
export default {
data(){
return{
Amsg:'' //v-model动态绑定数据
}
},
methods:{
sendMsg(){
eventBus.$emit('Msg',this.Amsg) //此时Msg在event-bus.js存放
}
}
} B组件 //Bcon.vue
<p>A传到B的值</p>
<p>{{ msg }}</p>
import { eventBus } from '@/utils/event-bus'
export default {
data() {
return {
msg:''
}
},
mounted(){
eventBus.$on("Msg",(msg)=>{ //B组件绑定事件 A组件点击触发时,将A的数据传递过来
this.msg=msg
})
}
}
公有组件App //App
<template>
<div id="app">
<Acon/>
<Bcon/>
</div>
</template>
<script>
import Acon from './components/Acon.vue'
import Bcon from './components/Bcon.vue'
export default {
name: 'App',
components:{
Acon,
Bcon,
}
}
示例效果对照图

全局事件总线

B往A传值

main.js中
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
},
}) A组件中
<p>B传到A的值</p>
<p>{{ msg }}</p>
export default {
data() {
return {
msg:''
}
},
mounted(){
this.$bus.$on("bMsg",(msg)=>{
this.msg=msg
})
},
beforeDestroy() {
this.$bus.$off('bMsg')
},
}
B组件中
<input v-model="Bmsg">
<button @click="sendMsg()">点一下</button>
data() {
return {
Bmsg:''
}
},
methods:{
sendMsg(){
this.$bus.$emit('bMsg',this.Bmsg)
}
}
示例效果对照图

VueX/Pinia

Vuex

Vuex配置
import Vue from Vue
import Vuex from Vuex
const store=new VueX({
state:{
count:0
},
mutations:{
fun(state){
state.count++
}
},
actions:{ }
}) #组件中使用:
import store from './store/index.js'
export default{
data(){
return{
count:this.$store.state.count //调取vuex上的数据
}
},
methods:{
trag(){
this.$store.commit("fun") //调用vuex上的方法
}
}
}

Pinia使用(Vue3)

安装与引入
#安装
npm i pinia
#引入(在main.js中引入并挂载在根实例上)
//引入
import {createPinia} from 'pinia'
const pinia =createPinia()
//挂载
const app = createApp(App)
app.use(pinia) // 使用vue实例的use方法,告诉vue我们要使用pinia
app.mount('#app')
store配置
#store文件夹下index.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { //存放相关数据类型
count: 0
}
},
actions: {//存放类似computed计算属性和方法
increment() {
this.count++
},
},
})
组件中使用(适用与vue3)
<template>
<div>数字: {{ CounterStore.count }}</div>
</template>
<script setup>
import { useCounterStore } from '../store/index.js'
const CounterStore = useCounterStore()
</script>

注:Vue2使用pinia要配合mapState,mapStores和mapActions等使用

Vue2-组件通讯传值的更多相关文章

  1. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  2. vue2.0中eventBus实现兄弟组件通讯

    我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是event ...

  3. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  4. Vue组件通讯

    Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通讯,是通过props ...

  5. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  6. Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

    Vue组件通讯   Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...

  7. vue 组件通讯方式到底有多少种 ?

    前置 做大小 vue 项目都离不开组件通讯, 自己也收藏了很多关于 vue 组件通讯的文章. 今天自己全部试了试, 并查了文档, 在这里总结一下并全部列出, 都是简单的例子. 如有错误欢迎指正. 温馨 ...

  8. vue的组件通讯

    Vue的组件通讯又称组件传值 一.父子组件传值: 父组件: <子组件名   :动态变量名 (随便起)='你想要传递的数据' ></子组件名> 子组件: 利用 prop去接收父组 ...

  9. Omi教程-组件通讯

    组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 父容器设置 childrenData ...

随机推荐

  1. java中操作符的用法

    5.操作符    public class Test{   public static void main(String[] args){     int i, k;     i = 10; /*下面 ...

  2. js知识梳理5:关于函数的要点梳理(1)

    写在前面 注:这个系列是本人对js知识的一些梳理,其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版,感谢它们的作者和译者.有发现什么问题的,欢迎留言指出 ...

  3. Elasticsearch 使用-安装

    Elasticsearch 使用-安装 官方网站 https://www.elastic.co/cn/elasticsearch/ 什么是 Elasticsearch? Elasticsearch 是 ...

  4. 【Electron】Electron Icon 图标说明、及常见问题

    [Electron]Electron Icon 图标说明.及常见问题 其实各种打包模块都有相关的文档说明,相关链接如下: electron-builder:https://www.electron.b ...

  5. JavaWeb学习day6-Response初学

    web服务器接收到客户端的http请求,针对这个请求,分别创建一个代表请求的HttpSevletRequest对象,代表响应的一个HttpSevletResponse 如果要获取客户端请求过来的数据, ...

  6. Java学习day23

    今天学习了下拉框实现与简单游戏的实现 package com.Cra2iTeT.snake; import javax.swing.*; import java.awt.*; import java. ...

  7. Python 中的鸭子类型和猴子补丁

    原文链接: Python 中的鸭子类型和猴子补丁 大家好,我是老王. Python 开发者可能都听说过鸭子类型和猴子补丁这两个词,即使没听过,也大概率写过相关的代码,只不过并不了解其背后的技术要点是这 ...

  8. Android 蓝牙串口通信工具类 SerialPortUtil 3.0.+

    建议使用4.+版本,避免一些不必要的bug.4.+版本文档地址:https://www.cnblogs.com/shanya/articles/16062256.html SerialPortUtil ...

  9. UML 类之间的关系

    统一建模语言(Unified Modeling Language,UML) 作用:对软件系统进行说明 如果说软件系统是一本小说的话,那么 UML 就是将小说动漫化. 也许你看过这本小说,但是时间一长, ...

  10. Visual Studio之安装(更新,扩展)速度缓慢解决方案

    一.背景 小伙伴们在安装visual studio,或者更新,扩展vs功能时,在家里网速正常的情况下,可能出现进度十分缓慢的问题,如何解决呢? 二.解决思路 修改hosts文件 1.地址:默认安装在 ...