VUE(8)--创建项目&父子组件

1. 创建公共组件（父子组件）

创建子组件 child.vue

<template>
<el-dialog title="params.name" :visible.sync="params.show" :before-close="closeUpdateDialog" >
</el-dialog>
</template>

<script>
export default{
name:"child",
data(){
return{
 
}
},
props:{
 params:Object //父组件的传过来的参数放在props
},
//用监听器来判断组件中参数的变化
watch:{
//监听对象的属性
'obj.open':function open(){
			    if(this.obj.open){
			    	console.log("组件触发");
			    }else{
			    	console.log("组件关闭");
			    }
			  } ,
 params(obj){
  if(obj.open){
    console.log("组件被触发")
   }else{
    console.log("组件未被触发，所有方法不执行")
  }
 }
},
created(){
},
methods:{
closeUpdateDialog(){
  this.params = {
  open:false,
  name:"11" 
  };
//通过$emit向父组件传值
  this.$emit("closeDialog",this.params);
}
}
}
</script>

父组件 parent.vue中引入子组件child.vue

<template>
<div>
<button @click="openDialog"></button>
<!--$event就是子组件传来的参数-->
<child :params="params" @closeComponent="closeDialog($event)"></child>
<!--以上子组件调用触发父组件方法竟然遇上了无法使用的问题 令我头大
直到我使用了另一种方法 屡试不爽-->
<!--前面是子组件的方法名 后面是父组件的方法名-->
<child :params="params" v-on:closeDialog="closeComponent"></child>
</div>
</template>

<script>
//引入子组件
import child from '../child'
export default{
 components:{
  child 
 },
 data(){
  return{
    params:{
    open:false
    }
  }
 },
 methods:{
 openDialog(){
  this.params = {
   open:true
  }
 },
closeComponent(e){
 //子组件触发此方法
 console.log("子组件传来的参数:")
 console.log(e);
 this.params = e;
 }
 }
}
</script>

注意！！！

子组件中接收父组件的props属性的值不要修改！不要修改！不要修改！不要在子组件中写this.props = {..}不要给props重新赋值！记住单向数据流，不要去改父组件传给子组件的值！