Vue >>props设置vue子组件的显示与隐藏

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_38789941/article/details/97374721

1、父组件代码

2、子组件代码 

3、代码说明 

       (1)首先在父组件内给子组件的标签绑定一个自定义属性visible,默认值为false,父组件内的按钮事件可以修改visible为true,从而达到让子组件显示的目的.

　　(2)子组件内部通过props来接收父组件传递过来的visible,通过v-show绑定到子组件的标签上,由于vue的单向数据流,子组件的按钮事件不能直接修改visible,所以利用$emit触发父组件内的事件

　　(3)在父组件内的标签上定义子组件触发的事件,然后在事件内部书写逻辑代码,修改父组件的visible.让props再次更新,子组件重新接收值为false,从而让子组件隐藏。

使用vue控制元素显示隐藏

<div title="链接"   v-if="showPrise"></div>



JS代码

new Vue({
	    el: '#app',
	    data: {
	        showPrise:false,
	        showRentPrise:false
	     } 
	    methods: {
		   changeStatus(){
			  if("执行条件"){
			      showPrise = true;
			      showRentPrise = true;  
              }
           }
        }
	 })