Vue 组件传值通信、父子组件、爷孙组件传值、方法调用、Vue中EventBus(事件总线)的基本用法

组件传：https://blog.csdn.net/mldwyy/article/details/88627119参考https://www.cnblogs.com/lianxisheng/p/10907350.htmlvue组件命名和传值data(){ post:[],}<tiezi v-for="(item,index) in post" :key="index" ...

心动止于人海。

3203人浏览 · 2019-06-17 22:57:15

心动止于人海。 · 2019-06-17 22:57:15 发布

组件传：vue子组件改变父组件中data的值_mldwyy的博客-CSDN博客_子组件修改父组件data 参考

https://www.cnblogs.com/lianxisheng/p/10907350.html vue组件命名和传值

vue父组件传子组件数据不更新视图的方法_前端打工人的博客-CSDN博客_vue 子组件数据不更新 vue父组件传子组件数据不更新视图的方法(组件里面写)

vue如何每次打开子组件弹窗都进行初始化_浮梦一场-CSDN博客_vue 弹窗初始化 vue如何每次打开子组件弹窗都进行初始化

vue 给data 数据的重新初始化

vue中使用v-bind=“$attrs“进行多层组件的传值_simple5960的博客-CSDN博客爷孙组件传值

当两个页面没有任关系，该如何通信？这就引出了 EventBus ( 事件总线 ) 这个概念

https://www.cnblogs.com/bkzj/p/16743584.html 1、Vue中EventBus(事件总线)的基本用法

vue里面使用EventBus（事件总线）_vue 事件总线-CSDN博客 2、Vue2、Vue3 EventBus使用 (推荐1、2)

Vue中事件总线eventBus的使用-发布订阅者模式，用于定义全局事件，实现非父子组件相互调用方法或传值——$on-监听事件订阅函数、$emit-发布事件发布函数、$off-销毁事件取消订阅_vue eventbus用法-CSDN博客

3、用来查看事件总线 api(有隐患)

Vue3

setup中的参数
setup(props,context) / setup(props,{emit,slots,attrs}) //推荐
props：包含props配置中声明的属性的对象，可用于父传子传值
attrs：包含没有在props配置中声明的属性的对象，相当于this.$attrs
slots：包含所有传入的插槽内容的对象，相当于this.$slots
emit：用来分发自定义事件的函数，相当于this.$emit，可用于子传父传值

推荐这种：
1.//v3组件传参   只能在父组件显示子组件
 
父传子(直接传变量)
//父组件
import { ref, provide } from 'vue';
let msg = ref("我是父组件参数")
provide("msg", msg)  //传递给子组件
//子组件
import { inject } from 'vue';
let msg = inject("msg")  //子组件接收
 
子传父 (点击传变量)
//父组件  
const up = (payload) => { 
    //payload接收子组件传递的参数
    msg.value = payload
}
provide("up", up)  //传方法给子组件和同时接收来自子组件的方法
//子组件
<button @click="fn">修改</button> //函数调用  
@click="up('我是子组件传给父组件的参数')"//直接调用

let up = inject("up")  //接收方法
const fn = () => { //函数调用
	 up(200000) // 子传父，使用up方法 修改msg的值
}
 
2.//v3组件传参
 
父传子(直接传变量)
//父组件
let msg = ref("我是父组件参数")
<child :msg="msg" />  //传递给子组件
//子组件
import { defineProps } from 'vue';
let props = defineProps(["msg"])   //子组件接收
{{ msg }} //子组件直接用
 
子传父(点击传变量)
//父组件  
<child @fn="up" />  //用一个新方法接受子组件传过来的方法
const up = (payload) => {
    msg.value = payload
}

//子组件
import { defineEmits } from 'vue'; 
let emits = defineEmits(["fn"])  //接收父组件传递的方法 1、必须先定义
const up = (msg) => {
    emits("fn",msg)  //调用方法 2、再用emit调用
}
@click="up('我是子组件传给父组件的参数')"  //调用方法

//直接调用：@click="emit('fn', { age: -10, name: 'Tom', sex: '男' })">

父组件：
<Test :message="msg" @close="fn" @accept="fn2"></Test>

子↓
<script>
import { reactive,toRefs } from 'vue'
export default{
    props: ['message'], //必须写传值名字
    emits:['父组件上的事件名','close','accept'], //不写有警告 父组件事件名 或者 子组件上的自定义事件例如：close
    setup(props,{emit}){
        const data = reactive({
            myson:props.message
        })
        console.log(props)
        console.log(emit)
        return{
            ...toRefs(data)
        }
    }
}
</script>


export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props,context){
    console.log('props:',props);
    console.log('props.msg:',props.msg);
    console.log('context:',context);
    console.log('context:',context.emit);
    return {
 
    }
  }
}

第二种：适合组件多层级 //爷传孙-曾孙 跨组件传值使用provide 需写在setup中
父↓
import {provide} from 'vue'
<Test></Test>
setup(){
    provide('message',"这是传的值")
    //provide('person',person) //取一个数据名字 值
}

子组件
<template>
 <div>
    子组件 ---{{myson}}
 </div>
</template>

<script>
import { reactive,toRefs,inject } from 'vue'
export default{
    setup(){
        const data = reactive({
            myson:inject('message')
        })
        let p1 = inject('person')
        return{
            ...toRefs(data),
            p1
        }
    }
}
</script>

vue父组件获取子组件的数据和方法 - 简书

父组件如何主动获取子组件的数据通过$refs

<HelloWorld ref="Child" :message="message"></HelloWorld>

调用hellworld子组件的时候直接定义一个ref，这样就可以通过this.$refs获取所需要的数据。

this.$refs.Child.属性
this.$refs.Child.方法

this.$refs.Child.username
this.$refs.Child.getData

子组件如何主动获取父组件中的数据和方法通过$parent

parent用来访问父组件实例，通常父组件都是唯一确定的，跟children类似

this.$parent.属性
this.$parent.方法

爷组件调用孙组件里面的属性和方法

this.$refs["netheader"].$refs["DatePicker"].属性
this.$refs["netheader"].$refs["DatePicker"].方法

子组件如何主动获取父组件中的数据和方法2

建议$emit('fnreceive')、$emit('fn-name') 事件命名全用小写或者驼峰('-')，其实vue项目中大写命名方式也能有用，还是建议全部小写或者驼峰。

Vue2

data(){ post:[], }

<tiezi v-for="(item,index) in post" :key="index" :condata="item" :baseStatic="baseStatic"></tiezi> props:['condata'],

@receive="changeValue(value)"这段代码中是不用带参数传递的，直接写为v-on:success="success"即可，加上参数反而会报变量未定义即使用的错误。

69.Vue+elementUI表格点击编辑按钮后没改数据，关闭弹框，再次点击编辑按钮，弹框里数据为空（已解决）_点击编辑弹出弹窗没有进行操作关闭列表数据变空白-CSDN博客

弹窗内容不改变数据为空问题：

前言：
在项目开发中，发现，第一次点编辑，弹框里数据赋值过来了，但关闭弹框，再次点击此条数据的编辑按钮，会发现，弹框里所有数据都为空，这是因为第一次打开没有改变数据，没有提交，数据内容不变，所以第二次打开弹框，监听的此条数据没有变化，即监听不起作用了

解决方法:
就是，在父组件(或者子组件)watch里监听新增编辑弹框的visible，如果为false时，就将传给子组件的rowData数组设置为空数组。

watch:{
    dialogFormAddEditvisible(value){
        if(value == false){
            this.rowData = []
        }
    }
}

//或者关闭窗口的时候 记得把数据置空 打开窗口再重新调接口赋值
this.dialogvisible = false
this.rowData = []

父组件需要在接口得到值后再传给子组件用下面这种

父组件得到数据后再渲染子组件

vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化_vue异步加载数据再渲染-CSDN博客

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

父组件
<template>
  <div>
    <child @fathermethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件
<template>
  <div>
    <button @click="childmethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fathermethod');
      }
    }
  };
</script>

父组件：
<template>
  <div>
    <!--父组件上可以绑定多个事件 @receive="changeValue" -->
    <child :userlist="userlist" @name-receive="changeValue" @receive2="fn2"></child> 
  </div>
</template>

methods:{
    changeValue(val){//接受的参数
    // alert("触发"+val)
     _this.val = val;
     _this.UserID = val.ID;
     _this.num = val.i;
   },
   fn2(){
       console.log('第二个事件')
   }
}
子组件：
<div
      class="avatar"
      v-for="(item,i) of userlist"
      :key="i"
      @click="HandleClick(i,item.ID)"
    >
      <img src="../assets/avatr.png" alt="头像" />
    </div>
export default{
props: {
    userlist: {
      type: Array //定义传值的类型为string
    }
  },
},
在mounted中打印传的值
mounted() {
    console.log(this.userlist)
},
methods: {
    HandleClick(i, ID) {
      this.num = i;
      this.$emit("name-receive", { i, ID }); //（第一个参数用来触发父组件的方法，第二个参数是父组件方法接受的参数,传值或空或自定义）
    }
  }

<div id="app">
        <h2>自定义的下拉框</h2>
        <!-- 传值 父组件 -> 子组件-->
        <custom-select :list='list1' btnvalue="查询"></custom-select>
        <h2>自定义的下拉框2</h2>
        <custom-select :list='list2' btnvalue="搜索"></custom-select>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                list1:["北京","上海","广东"],
                list2:["19-05-20","19-05-21","19-05-22"]
            }
        })
        //注册组件
        //全局注册
        Vue.component("custom-select",{
            //组件中data必须是函数
            data:function(){
                return {
                    selectShow:true,
                    val:""
                };
            },
            props:["btnvalue","list"],//只能用命名驼峰 接收值 下面绑定
            template:`
            <section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input @click="!selectShow" type="text" class="keyWord" :value="val" />
                        <input type="button" :value="btnvalue"> 
                        <span></span>
                    </div>
                       //父组件接收事件
                    <custom-list @receive="changeValue" :list="list" v-show="selectShow"></custom-list>
                </div>
			</section>`,
            methods:{
                changeValue(value){
                    // alert("触发"+value)
                    this.val = value;
                }
            }
        })
        //子组件
        Vue.component("custom-list",{
            props:["list"],
            template:`
                <ul class="list" v-show="selectShow">
                    <li @click="selectValue(item)" v-for="item in list">{{item}}</li>
                </ul>
                `,
            //事件提示父组件
            methods: {
                selectValue(item){
                    this.$emit("receive",item) //（第一个参数用来触发父组件的方法，第二个参数是父组件方法接受的参数,传值或空或自定义）
                }
            },
            }  
        )
       
    </script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...