Vue 组件传值通信、父子组件、爷孙组件传值、方法调用

组件传：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博客爷孙组件传值

Vue3

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

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向父组件触发一个事件，父组件监听这个事件就行了。父组件
<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>

推荐这种：
父组件：
<Test :message="msg" @close="fn" @accept="fn2"></Test>子↓
<script>
import { reactive,toRefs } from 'vue'
export default{props: ['message'], //必须写传值名字emits:['父组件上的事件名','close','accept'], //不写有警告 父组件事件名 或者 子组件上的自定义事件例如：closesetup(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>

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"即可，加上参数反而会报变量未定义即使用的错误。

子组件：
<divclass="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("receive", { i, ID }); //（第一个参数用来触发父组件的方法，第二个参数是父组件方法接受的参数,传值或空或自定义）}}父组件：
<avatr :userlist="userlist" @receive="changeValue" @receive2="fn2"></avatr>
//父组件上可以绑定多个事件
@receive="changeValue"methods:{changeValue(val){// alert("触发"+val)_this.val = val;_this.UserID = val.ID;_this.num = val.i;},fn2(){console.log('第二个事件')}
}

<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 组件传值通信、父子组件、爷孙组件传值、方法调用相关推荐

组件通信、传值（父子、爷孙、多层级）（prop、$emit、provide、inject）（vue）
问题: 组件之间的通信无非就那种:兄弟组件间.父子组件间.爷孙(多层级间),兄弟组件之间通信我前面的文章已经讲过(点击此链接: 兄弟组件:(38条消息) 兄弟组件通信(vue-bus)(vue)_秃秃 ...
vue学习（1）vue3/2下的父子/爷孙组件间方法调用
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了) vue2中的写法爷组件控制孙组件的锚点跳转(父子组件间方法调用类似) // 孙组件 <tem ...
vue3组件之间通信(三)——爷孙组件传递属性和方法
文章目录 1:setup函数传递属性和方法($attrs) 1:代码 2:主要代码和详细讲解 3:注意点 2:script setup 语法糖传递属性和方法 1:代码 2:主要代码和详细讲解 3:注意 ...
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
$attrs和 $listeners如何使用呢? $attrs是用来将数据从爷组件传递给孙组件的.(理解为之前的父传子) $listeners是用来从孙组件中触发爷组件中事件的.(理解为之前的子传父) ...
vue3跨组件传值（爷孙组件传值）
在父组件中通过provide来传递 provide('data':要传递的值) 在下面的子组件或孙组件中通过 let ecorData: any = inject("data"); ...
vue3组件之间通信(一)——父传子属性和方法
文章目录一:setup函数传递 1:父组件传值给子组件 2:父组件传方法给子组件(使用了":"和"@"两种形式来传方法) 二:script setup 语法糖 ...
vue3组件之间通信(二)——子传父属性和方法
文章目录 1:setup函数传递属性和方法 (1)子组件传值和方法给父组件 (2)使用ref的方式来在父组件中获取子组件的数据和方法 2:script setup 语法糖传递属性和方法 (1)子组件传 ...
【微信小程序】组件间通信与事件-获取子组件的实例对象
1.0 前言 1.1 为何写这篇笔记小程序官方文档只粗略给了一段代码,让笔者找不到北,故记录下易于理解的过程,以便新手了解和使用 1.2 获取子组件实例对象的作用当引用了组件,且父组件使用了监听函 ...
vue的组件化+父子组件的通信
文章目录 1.注册组件的基本步骤 1.1 原始的创建方法 1.2语法糖创建方法 2.全局组件与局部组件 2.1 全局组件 2.2 局部组件 2.3语法糖局部组件(最简写法) 3. 父子组件 4.组件中 ...

Vue 组件传值通信、父子组件、爷孙组件传值、方法调用

Vue 组件传值通信、父子组件、爷孙组件传值、方法调用相关推荐

最新文章

热门文章