在另一篇文章我们会谈及祖父孙三级之间的通信,传送门:vue组件通信的方式(二)

1.父组件向子组件传值(绑定属性)::tosonData="fatherdata"绑定,props接受值

首先我们定义一个父组件father.vue:

<template>
  <div>
    <div style="margin-top:50px">
        <div>
            父组件:
            <span>展示子组件的值:{{sondata}}</span>
        </div>
        <son :tosonData="fatherdata"></son>
    </div>
  </div>
</template>

<script>
import son from '@/components/son.vue'
export default {
    data() {
        return {
            fatherdata: '我是父组件的值',
            sondata: ''
        }
    },
    components: {
        son
    }

}
</script>

<style>

</style>

子组件son.vue:

<template>
    <div style="border:1px solid red">
      子组件:
      <span>接受父组件的值:{{tosonData}}</span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props: {
        tosonData: String
    }
}
</script>

<style>

</style>

2.子组件向父组件传值($emit触发自定义事件并传值,父组件绑定该事件接受)

父组件:

<template>
  <div>
    <div style="margin-top:50px">
        <div>
            父组件:
            <span>展示子组件的值:{{sondata}}</span>
        </div>
        <son @tofatherdataHandle="getsondata"></son>
    </div>
  </div>
</template>

<script>
import son from '@/components/son.vue'
export default {
    data() {
        return {
            sondata: ''
        }
    },
    components: {
        son
    },
    methods: {
        getsondata(val) {
            this.sondata = val
        }
    }

}
</script>

<style>

</style>

子组件:

<template>
    <div style="border:1px solid red">
      子组件:
      <Button type="primary" @click="tofatherdataBtn">子组件按钮</Button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tofatherdata: '我是子组件的值'
        }
    },
    methods: {
        tofatherdataBtn() {
            this.$emit('tofatherdataHandle', this.tofatherdata)
        }
    }
}
</script>

<style>

</style>

展示结果: 

 

3.兄弟组件传值(定义一个vue空实例作为桥梁):

首先我们在main.js中定义vue空实例

//创建vue空实例
let hub=new Vue()
Vue.prototype.$eventhande = hub //加入vue原型中,让所有组件可以访问到该对象

然后在定义一个兄弟组件brother.vue:

<template>
	<div>
		<h1>我是子组件的兄弟组件</h1>
		<button @click="todata">摁我传值给兄弟组件</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				brotherdata:"我是传给兄弟组件的数据"
			}
		},
		methods:{
			todata(){
//				触发自定义事件change,传入brotherdata值
				this.$eventhande.$emit('change',this.brotherdata)
			}
		}
	}
</script>

然后我们在另外一个兄弟组件接受该值就OK了,如图1和图2的father.vue,和son.vue

4.父组件触发子组件的事件

在使用this.$set()修改数组数据进行响应式更新页面dom时,有可能会不成功,可以尝试先执行删除该属性:this.$delete(this.list[this.select], 'left'),再修改该属性数据:this.$set(this.list[this.select], 'left', 20)

子组件:

<template>
	<div>
		<p>子组件事件</p>
	</div>
</template>

<script>
	export default{
		data() {
			return {
			}
		},
		mounted() {
			// 监听父组件触发子组件事件
			this.$on('bridge', (val) => {
			  this.sonAction()
			})
		},
		methods: {
			sonAction() {
			  console.log('子组件事件被触发')
			}
		}
	}
</script>

<style>
</style>

父组件:

<template>
	<div>
		<son ref='code'></son>
		<button @click="btnCode">触发子组件事件</button>
	</div>
</template>

<script>
	import son from '@/components/son.vue'
	export default{
		data() {
			return {
				identifyCode: '', // 生成的验证码
			}
		},
		components: {
		    son
		},
		methods: {
			// 切换验证码(点击文字切换)
			btnCode() {
			  // 触发子组件刷新验证码事件
			  this.$refs.code.$emit('bridge')
			}
		}
	}
</script>

<style>
</style>

5.解决子组件接受不到父组件的值的问题

问题描述:当我们调用接口时,把接口返回的值传入到子组件,但是发现传不过去,是为什么?因为当子组件加载时,接口是异步的,此时的值还没返回来,所以传入子组件的值是初始值,可能为空。

解决办法:监听传入子组件的值,watch

父组件不变,子组件props接受值也不变,加入监听函数:监听时获取到新值,则重新赋值,调用接口即可。

或者用第二种方法好像也可以解决:

 在计算属性中定义另外一个属性,关联type这个属性,当type重新更新了有变化,这个函数中就能拦截到,然后就可以保存或者使用了,和第一种方法原理差不多

Logo

前往低代码交流专区

更多推荐