组件传：vue子组件改变父组件中data的值_mldwyy的博客-CSDN博客_子组件修改父组件data参考
/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.usernamethis.$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"]}})//注册组件//全局注册ponent("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;}}})//子组件ponent("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>
