vue父子组件之间的传值

1.父子组件之间的传值

在父组件中

<div id="app">
     <my-com1 :dat='msg1' @cd='msg3=$event'></my-com1>
     <p>这是子组件往父组件传的值：<span>{{msg3}}</span></p>
  </div>
 
//vue实例
var app=new Vue({
        el:'#app',
        data:{
            msg1:{
                name:'zhangs',
                text:'hahahaha'
            },
            msg3:''

        },
        methods:{}
    })
  

子组件中

<template id="tem">
          <div>
              <p>这是子组件</p>
              <p>{{dat.name}}</p>
              <p>{{dat.text}}</p>
              <button @click='click'>子组件往父组件传值</button>
          </div>
    </template>
 
Vue.component('my-com1',{
        template:'#tem',
        props:['dat'],
        data(){
            return{
                msg2:'这是子组件传给父组件的值'
            }
        },
        methods:{
            click(){
                this.$emit('cd',this.msg2)
            }
        }
    })

父传子：子组件用props接受；

子传父：子组件用$emit传出，父组件用$event接收