VUE 父子组件 （本文针对的是vue 2.x）

VUE 父子组件 （本文针对的是vue 2.x）

子组件的调用有两种方式，一个是全局注册，即在main.js中注册,另外一种就是在需用使用到的页面里在components中注册引入子组件

1.全局注册子组件

第一步，书写一个子组件（如果要引入其他的模块，就正常的import引用就好）；

<template>
  <div class="page-login">
     <header class="silenc-header">
         输入验证码
         <i class="iconfont silenc-permanently" @click="goClose">&#xe6fb;</i>
     </header>

         <img src="https://osshanyadev.oss-cn-hangzhou.aliyuncs.com/front-end-static/special/jiaoyi-app/img/bound-logo.png" alt="" class="silenc-logo">
      <p class="cannot-yet">请先输入验证码后登录</p>
          <div class="login-form">
      <div class="input-text">
        <i class="iconfont phoneIcon">&#xe6c2;</i><input type="number"
               oninput="if(value.length>11)value=value.slice(0,11)"
               class="ui-text"
               ref="phoneFocus"
               placeholder="请输入新手机号码"
               v-model="mobile" disabled>
      </div>
      <div class="input-text">
        <i class="iconfont codeIcon">&#xe6c4;</i>
        <input type="number"
               class="ui-text w50"
               oninput="if(value.length>6)value=value.slice(0,6)"
               placeholder="请输入短信验证码"
               v-model="vcode">
        <span v-show="sendAuthCode"
              class="sendVerification"
              @click="getAuthCode">发送验证码</span>
        <span v-show="!sendAuthCode"
              class="sendVerification">{{auth_time}}秒后重新发送</span>
      </div>
      <div class="input-btn">
        <button class="confirm"
                :disabled="!vphone || !vcode"
                @click="okLogin">登录</button>
      </div>
    </div>

  </div>
</template>

<script>
var token;
var sumder;
export default {
  props: ["mobile", "deviceType", "ip","p_show"],
  data() {
    return {
      vphone: this.mobile,
    };
  },
  components: {
    Toast
  },
  created() {

  },
  mounted() {},
  watch: {
    visible(val) {
      this.dialog_visible = val;
    }
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/login.scss";
</style>

第二步，在子组件同目录下创建一个index.js文件,将Vue.component变为一个可导出的组件；

import phonevenify from './phoneverify'
const phoneVenify = {
    install:function(Vue) {
        Vue.component('phoneVenify',phonevenify)
    }
}
export default phoneVenify;

第三步,在main.js中使用import导入组件的index.js再用Vue.use()全局注册;

import phoneVenify from '@/components/popup-venify/index'
Vue.use(phoneVenify)

第四步，在父组件中引入子组件；

<template>
  <!-- 引入子组件 -->
  <phoneVenify v-show="p_show" :p_show.sync="p_show" :mobile="mobile" :deviceType="deviceType" :ip="ip"></phoneVenify>
</template>

<script>
var token;
var sumder;
export default {
  data() {
    return {
      deviceType: "h5",
      ip: "",
      checkDevice: "",
      userAgreementInfo: "",
      mobile: "",
      p_show: false
    };
  },
  components: {

  },
  created() {

  },
  mounted() {},
  watch: {
    visible(val) {
      this.dialog_visible = val;
    }
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/login.scss";
</style>

子组件中的props传参，需要在子组件中定义好 props: ["mobile", "deviceType", "ip","p_show"],然后在引入子组件中的父组件中使用:value='需要传入的值'的方式使用；
在子组件中methods使用传入的值，可直接正常的使用this.value方法使用；

---

2.按需加载(注释：引用地址：https://segmentfault.com/a/1190000014381699)

父组件

<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>

import Children from './children.vue'

export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },

  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

子组件

<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

vue的父子组件间通信可以总结成一句话：
父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递。