//BasicView.vue代碼如下:

<template>
  <div class="basic">
    <h3><i class="title_icon"></i>基礎(chǔ)知識(shí)</h3>
    <PassVal
      placeholder="我是placerholder"
      :clearable="true"
      :defaultVal="defaultVal"
      @changGrandChildVal="changGrandChildVal"
    />
  </div>
</template>

<script>
import PassVal from "@/blocks/PassVal/PassVal.vue";
export default {
  data() {
    return {
      defaultVal: "測(cè)試透?jìng)?,
    };
  },
  components: {
    PassVal,
  },
  methods: {
    /**
     * @function input值修改回調(diào)函數(shù)
     */
    changGrandChildVal(val) {
      console.log("PassInput組件的值變了", val);
    },
  },
};
</script>

<style scoped>
.basic {
  width: 100%;
  height: 100%;
}
</style>

//PassVal.vue
<template>
  <div class="passval">
    <el-divider content-position="left">1-$attr和 $listeners</el-divider>
    <div class="container">
      <div class="flex-two">
        <passInput v-bind="$attrs" v-on="$listeners"></passInput>
      </div>
    </div>
  </div>
</template>

<script>
import PassInput from "./components/PassInput.vue";
export default {
  components: {
    PassInput,
  },
  props: {
    defaultVal: {
      type: String,
      default: "輸入框默認(rèn)值",
    },
  },
};
</script>

<style scoped>
.passval {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div class="pass-input">
    <el-input v-bind="$attrs" v-model="value" @input="inputHandler"></el-input>
  </div>
</template>

<script>
export default {
  name: "PassInput",
  created() {
    console.log("我是$attrs", this.$attrs);
    console.log("我是$listeners", this.$listeners);
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    /**
     * @function el-input的輸入回調(diào)函數(shù)
     */
    inputHandler(val) {
      this.$emit("changGrandChildVal", val);
    },
  },
};
</script>

<style scoped>
.pass-input {
  width: 100%;
  height: 100%;
}
</style>