vue組件通信---props,$emit

props

父組件可使用 props 把數據傳給子組件。

$emit

子組件可使用 $emit 觸發父組件的自定義事件。
父組件

<template>
 	<div>
 		<login-layer  @toLoginEvent='tologin'  :title='logintitle'></login-layer>
	</div>
</template>

<script>
import LoginLayer from "@/components/loginlayer"
  export default {
    name:'login',
    components: {LoginLayer},
    data () {
      return {
        logintitle:"登陸",
     }
    },
    methods:{
      tologin(tel,code){//觸發子組件
        console.log('tel:'+tel’)
        console.log('code:'+code’)
      }
    }
  }

<template>
  <div class="login-box">
    <div class="head">
      <div class="head-tit fz32 fw">{{title}}</div>
    </div>
    <div class="content fz28 corlor-999">
      <div class="content-item">
        <mt-field placeholder="請輸入手機號" type="tel" v-model="phone"></mt-field>
      </div>
      <div class="content-item">
        <mt-field  placeholder="請輸入驗證碼" type="number" v-model="code"></mt-field>
      </div>
    </div>
    <footer class="fz28">
      <div class="footer-item login" @click.prevent="toLogin">當即登陸</div>
    </footer>
  </div>
</template>
export default {
  name: "login",
  data() {
    return {
      phone: '',
      code:''
    };
  },
  props: {
    title: {
      type: String,
      default:'註冊'
      //validator: function(value) { //數據驗證
       // return (
           ///^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(value)
        // );
       }
    },
  },
  methods: {
    toLogin() {
      this.$emit('toLoginEvent',his.phone,this.code)
    },
  }
};