父传子：props down 事件向下传
子传父： event up 事件向上传

1.父组件给子组件传值方法：
第一步：用import引入子组件

第二步：在components中注入子组件

第三步：在父组件中定义一个指令:name=“aaa” （name名称需要和子组件中的props保持一致,aaa是要传递给子组件的数据,请注意这里:name是v-bind动态绑定数据，，aaa需要在data里定义且定义的是字符串，否则在子组件接收到的参数就是undefined ，也可以直接写静态数据，name=“aaa”,这里的静态aaa不需要在data里定义）

第四步：在子组件中定义props属性，name的type可以自定义类型（但是必须和父组件中的数据类型一致，否则会报错），default是默认值。 子组件里可以这样写，props: [‘name’]

2.子组件给父组件传值的方法：
第一步：在子组件绑定一个click事件，在事件里写上 this.element plus 子层给父层传值_方法名emit里的方法名，cName为此方法要执行的函数
第三步：定义方法childFn（必须和子组件中方法名一致），parentFn定义可随意。
【注意】在子组件里还可以这么写， this.$parent.cName(‘peng’)，这么写表明不管父组件里有没有方法，子组件都会向父组件发送这个值

3.在子组件里新增一个div,并在这个div里写上{{age}}，再在向父组件emit的changeName事件里打印this.age，

在父组件写上以下代码：



<web-header ref=“webHeader” :name=“aaa” @changeName=“cName”> 
 
 


 export default { 

 name: ‘shakeBox’, 

 components: { WebHeader }， 

 data () { 

 return { 

 aaa: ‘zhouwen’ 

 } 

 }, 

 methods: { 

 cName (data) { 

 console.log(‘data’, data) 

 this.aaa = data 

 }, 

 chuanzijian () { 

 this. 
refs.zi.setAttribute(‘age’, 18) 
 }, 

 } 

 } 
在子组件写以下代码：
 
 
 
 111 
 
 <div @click=“test”>提交 
 


  age{{age}} 

 


export default {
 props: {
 name: {
 type: String,
 default: null
 }
 },
 watch: {
 name (value) {
 console.log(‘name1’, value)
 }
 },
 data () {
 return {
 age: 0
 }
 },
 name: ‘web-header’,
 mounted () {
 console.log(‘this.name’, this.name)
 },
 methods: {
 test () {
 // this.parent.cName(‘peng’)
 },
 changeName (data) {
 this.age = data
 console.log(‘this.age’, this.age)
 }
 }
 }4.在父组件里想打开子组件的弹框，可以这么做：
在父组件引入子组件，并在引用子组件的地方加上 ref属性，具体代码如下 

  parent 
 
 <el-button @click=“openDialog”> 
 
 点击打开子组件弹框