组件基础（一）

Vue组件封装是为了完成代码的复用,既能复用ui又能复用逻辑

组件定义、父组件向子组件传参【props】、子组件通过自定义事件向父组件传值【$emit】

<template>
  <div>
    <input type="password" v-model="pass" />
    <span>{{ passSafe }}</span>
  </div>
</template>

<script>
export default {
  name: "PasswordSafeComponent",
  // 接收父组件传入的参数
  props: ['defaultPass'],
  // 数据声明,与之前方式有变化
  data: function(){
    return {
      passSafe: '',
      // 将父组件传入参数赋值给子组件自己的变量,避免修改prop影响父组件
      pass: this.defaultPass
    }
  },
  watch: {
    pass(value){
      let len = value.length;
      if(len < 6){
        this.passSafe = '低';
      }else if(len > 10){
        this.passSafe = '高';
      }else{
        this.passSafe = '中';
      }
      // 当pass发生改变的时候
      this.$emit('passChange', this.pass);
    }
  }
}
</script>

<style scoped>

</style>

父组件引用

<template>
  <div class="about">
<!--    <h1>This is an about page</h1>-->
    <table align="center">
      <tr>
        <td>用户名</td>
        <td><input type="text" :value="user.username"></td>
      </tr>
      <tr>
        <td>密码</td>
        <td><password-safe-component :default-pass="user.password" @passChange="user.password = $event"></password-safe-component></td>
      </tr>
      <input type="button" @click="doLogin" value="登陆"/>
    </table>
    <!-- 组件的复用 -->
<!--    <password-safe-component></password-safe-component>-->
<!--    <password-safe-component></password-safe-component>-->
<!--    <password-safe-component></password-safe-component>-->
<!--    <password-safe-component></password-safe-component>-->
<!--    <password-safe-component></password-safe-component>-->
  </div>
</template>
<script>
import PasswordSafeComponent from "@/components/PasswordSafeComponent";

export default {
  name: 'About',
  components: {PasswordSafeComponent},
  comments: {
    PasswordSafeComponent
  },
  data: function(){
    return {
      user: {
        username: 'admin',
        password: '123456'
      },
    }
  },
  methods: {
    doLogin(){
      console.log(this.user);
    }
  }
}
</script>