vue组件传值

父传子

父组件
<template>
  <div>
      我是爸爸：{{message}}
      <hr>
      <son :toSonData="toSonData"></son>         <!-- 显示 子组件内容-->
  </div>
</template>
 
<script>
import Son from "./son.vue";
export default {
  data() {
    return {
      message : "儿子你好",
      toSonData: "大嘴巴子"//给子组件的值
    };
  },
 
  components: {
     'son':Son  //标签名：组件名   
  }
  
};
</script>

<style  scoped>

</style>

子组件
<template>
  <div>
    我是儿子：{{message}}
    <br>
    爸爸给我的礼物：{{toSonData}}
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      message : "爸爸你好"
    }
  },

 props:["toSonData"],//第一种方式

//   props:{//第二种方式
//     toSonData:{
//       type:String,
//       default:function(){
//         return ""
//       }
//     }
//   },
}
 
</script>

<style  scoped>
</style>

结果 

 

子传父

子组件
<template>
<!-- 子传父 -->
<!--01 父组件提供一个方法，这个方法是由子组件调用的，数据通过方法的参数拿到 -->
<!--02 父组件将这个方法传递给子组件-->
<!--03 由子组件触发这个方法，将要传递的数据作为方法的参数传递  this.$emit('父组件中定义的自定义事件名',要传递给父组件的数据) -->
  <div>
      <button @click="sendMsg" >传递数据给父组件</button>
  </div>
</template>

<script>
  export default {
      data(){
         return{
            msg:'我是子组件msg  '
         }
      },
      methods:{
        sendMsg(){
          this.$emit('getMsg',this.msg)
        }
      }
  }
</script>
<style>

</style>

父组件
<template>
    <div>
      <!--给子组件传递一个自定义事件 getMsg,它的值是getSonMsg方法 -->
        <son @getMsg='getSonMsg'></son>  
        <div>{{MSG}}</div> <!--显示子组件传过来的内容-->
    </div>
</template>

<script>
import son from './son'
    export default {
        data(){
            return{
              MSG:''
            }
        },

        components:{
          'son':son
        },

        methods:{
          getSonMsg(data){//此方法用来接收子组件传来的值
              this.MSG=data
              console.log( '接收到子组件传递过来的数据为：', data )
          }
        }
    }
</script>

<style>

</style>

兄弟传值

利用.sync  子组件修改父组件内容

、

v-moel传值， 子组件改值