父子组件通信

总的来说，子组件靠props方法接收父组件传来的值，通过$emit方法将值传递给父组件.

父组件给子组件传值
父组件在子组件上进行绑定 :msg="person"，子组件通过props接收传值
父组件在子组件上绑定ref="zi",通过触发一个点击事件button 通过this.$refs.zi.zifangfa()

ref属性：
1.被用来给元素或子组件注册引用信息
2.应用和html标签上获取的是真是的DOM元素，用在组件标签上获取的是组件的实例对象
3.使用方式：ref=“xxx” 获取方式：this.$refs.xxx

父组件

<template>
  <div>
      <h1>我只父组件（给子组件传值）</h1>
      <Prosub :msg="person" ref="zi"></Prosub>
      <button @click="zujian"></button>
  </div>
</template>
<script>
import Prosub from '@/components/Prosub.vue'
export default {
    name:'Pro',
    data(){
        return{
            person:{
                name:'李辉',
                age:'18',
                sex:'男'
            },
        }
    },
    components:{
        Prosub
    },
    methods:{
    	zujian(){
        this.$refs.zi.zifangfa()
        //this.$refs.zi指向子组件 zifangfa()是子组件中定义的方法
      }
    }
}
</script>

子组件

<template>
  <div>
      <h2>我是子组件</h2>
      <div>{{msg.age}}</div>
  </div>
</template>
<script>
export default {
    name:'Prosub',
    data(){
        return{
        mess=""
        }
    },
    props:{
        msg:[Object,Array]
    },
    methods：{
		zifangfa(){
      		this.mess="我是子组件！！！"
    	}
	}
}
</script>

子组件给父组件传值
1.通过props实现子传父
跟父组件给子组件穿值使用方法大致相同，子组件使用props之后在方法中调用this.xxx(需要传的内容)。。。。具体看代码吧

父组件
<template>
  <div>
      <h1>我只父组件（给子组件传值）</h1>
      <Prosub :getchildmsg="getchildmsg"></Prosub>
  </div>
</template>
<script>
import Prosub from '@/components/Prosub.vue'
export default {
    name:'Pro',
    components:{
        Prosub
    },
    methods:{
    	getchildmsg(e){
        consol.log(e)
      }
    }
}
</script>

子组件
<template>
  <div>
      <h2>我是子组件</h2>
     <butto @click="givemsg"> 传值</button>
  </div>
</template>
<script>
export default {
    name:'Prosub',
    data(){
        return{
        msg:""
        }
    },
    props:{
        getchildmsg
    },
    methods：{
		givemsg(){
      		this.getchildmsg(this.msg)
    	}
	}
}
</script>

2.通过绑定一个事件实现子传父
子组件触发一个事件button @click val() => 使用$emit的第一个参数（aaa）=> 父组件在子组件上进行绑定 @aaa=‘父组件中的某个函数’（getData()）最终调用子组件传递的数据或者指令。。具体看代码
父组件

<template>
  <div>
      <h1>我是父组件(接收子组件的传值)</h1>
      <h2>{{getVal}}</h2>
      <Prosub @aaa="getData"></Prosub>
  </div>
</template>

<script>
import Prosub from '@/components/Prosub.vue'
export default {
    name:'Pro',
    data(){
        return{
            getVal:''
        }
    },
    components:{
        Prosub
    },
    methods:{
        getData:function (data) {
            this.getVal = data
        }
    }
}
</script>

子组件

<template>
  <div>
      <h2>我是子组件</h2>
      <input type="text" v-model="submsg">
      <button @click="val">传值</button>
  </div>
</template>

<script>
export default {
    name:'Prosub',
    data(){
        return{
            submsg:'5555S',
        }
    },
    methods:{
        val:function () {
            this.$emit('aaa',this.submsg)
        }
    }
}
</script>