vue父子传参

来吧，对父子传参还不太了解的同胞们，一起来了解一下吧。
构建目录什么的的就不多说了
首先，创建一个父组件和子组件，名字呢自己随便

 <!-- 父传子 -->
 <!-- 在父组件的模块里写入  使用v-bind可以简写：将父组件传的值绑定到子组件上 -->
    <div>
      我是爸爸：{{message}}
      <hr>
      <son :toSonData="toSonData"></son>
  </div>
	<script>
import son from "./components/son.vue"
export default {
  data() {
    return {
      message: "儿子你好",
      toSonData: "给你一个亿",  //给子组件传值
    }
  },
  components: {
    son
  }
}
</script>

接下来在components文件夹里创建一个子组件 名字随意定

<div>
    我是子组件: {{message}}
    <br>
    父组件给我的礼物: {{toSonData}}
  </div> 

<script>
export default {
  //props:["toSonData"], //第一种方法
  props: { //第二种方式
    toSonData: {
      type: String,
        default:function() {
          return ""
        }
      }
    },
    data () {
      return {
        message: "父组件你好"
    }
  }
}
</script>

效果图

父传子
子传父 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法，将接收到的值赋给data中的sendSonMessage)

<div>
        我是父组件： {{message}}
        <br>
        儿子传的值： {{sendSonMessage}}
        <hr>
        <son :toSonData="toSonData" @toFatherData="sendSonData"></son>
      </div>

<script>
import son from "./components/son.vue"
export default {
  data() {
    return {
      message: "儿子你好",
      toSonData: "给你一个亿",  //给子组件传值
      sendSonMessage: ""
    }
  },
  components: {
    son
  },
  methods: {
    sendSonData (data) {
      this.sendSonMessage = data
    }
  }
}
</script>

子组件里
 <div>
    我是子组件： {{message}}
    <br>
    父组件给我的礼物：{{toSonData}}
    <hr>
    <button @click="toFatherData">给父组件传值</button>
  </div>
<script>
export default {
  //props:["toSonData"], //第一种方法
  props: { //第二种方式
    toSonData: {
      type: String,
        default:function() {
          return ""
        }
      }
    },
    data () {
      return {
        message: "父组件你好"
    }
  },
  methods: {
    toFatherData () {
      this.$emit("toFatherData", "给父组件满满的正能量")
    }
  }
}
</script>

效果
未点击

已点击