vue项目中父传子如何传递

vue项目中父传子如何传递

1、在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值

2、在子组件通过props:[“自定义属性名”]来接收数据

实际应用：

1、创建vue项目，在components(子组件)，创建一个组件search.vue,具体内容如下：

<template>
  <div>
 
    <div class="search_top_container">
      <div class="search_input_container">
        <div class="search_input_wrapper">
          <div class="search-input_box">
            <input
              type="text"
              :placeholder="placeHolder"
              v-model="tempTitle"
              @focus="onFocus"
              @blur="onClickHide"
              @keydown.up="onKeyDownUp"
              @keydown.down="onKeyDown"
            />
            <div>{{buttonText}}</div>
          </div>
        </div>
      </div>
      <div class="show_contant_container" v-show="flag">
        <div
          v-for="(item,index) in historyItem"
          :class="{active:HoverIndex==index}"
          :key="index"
          @mouseenter="onMouseEnter(index)"
          @click="onClickItem(index)"
        >
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  props: {
    placeHolder: {
      type: String, //接收字符串类型
      defaule: "", //默认为空
    },
    buttonText: {
      type: String, //接收字符串类型
      required: true, //必须传参
      default: "百度一下", //默认值
      validator: function (val) {
        return val.length <= 4; //必须满足此条件
      },
    },
    historyItem: {
      type: Array, //接收数组类型
      required: true, //必要（必须传参）
      validator: function (val) {
        return val.length <= 10;
      },
    },
  },
  data() {
    return {
      flag: false, //默认隐藏
      HoverIndex: -1, //记录鼠标移入的下标
      tempTitle: "", //输入的内容
    };
  },
  methods: {
    onFocus() {
      //获取焦点
      this.flag = true;
    },
    onClickHide() {
      //点击图标消失
      this.flag = false;
    },
    onMouseEnter(index) {
      //鼠标进入，字体颜色改变
      this.HoverIndex = index;
    },
    onKeyDownUp() {
      //键盘事件 按下上箭头事件
      this.HoverIndex--;
      // 判断是否移动到一条，如果在向后移动，从最下面开始
      if (this.HoverIndex < 0) {
        this.HoverIndex = this.historyItem.length - 1;
      }
      this.tempTitle = this.historyItem[this.HoverIndex]; //把移动到的内容展示到搜索框
    },
    onKeyDown() {
      //键盘事件 按下下箭头事件
      this.HoverIndex++;
      // 判断是否移动到最后一条
      if (this.HoverIndex > this.historyItem.length - 1) {
        //如果移动到最后一条，就从头开始
        this.HoverIndex = 0;
      }
      this.tempTitle = this.historyItem[this.HoverIndex]; //把移动到的内容展示到搜索框
    },
    onClickItem(index) {
      //点击事件 ，鼠标进入后点击显示到搜索框
      this.tempTitle = this.historyItem[index];
    },
  },
};
</script>

<style lang="scss" scoped>
.search_top_container {
  width: 80%;
  margin: 0 auto;
  //   background: red;
  display: inline_flex;
  flex-wrap: wrap;
  .search_input_container {
    width: 60%;
    // height: 60px;
    // background: yellow;
    margin: 0 auto;
    .search_input_wrapper {
      width: 100%;
      //   height: 60px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      .search-input_box {
        width: 80%;
        height: 40px;
        // background: pink;
        display: inline-flex;
        border: 1px solid blue;
        input {
          width: 84%;
          outline: none;
          border: none;
        }
        div {
          width: 16%;
          background: blue;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: white;
        }
      }
    }
  }
  .show_contant_container {
    width: 48%;
    margin: 0 auto;
    //   height: 300px;
    background: pink;
    div {
      width: 100%;
      height: 30px;
      padding: 0 10px;
      box-sizing: border-box;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
    .active {
      color: blue;
    }
  }
}
</style>

 2、在views文件夹中创建一个Home.vue文件，具体内容如下：

<template>
  <div>
    <search placeHolder="请输入搜索内容" 
    buttonText="搜索" 
    :historyItem="historyList"
    ></search>
  </div>
</template>

<script>
import search from "@/components/search.vue";//引入子组件
export default {
  components:{
    search,//注册组件
  },
  data() {
    return {
      historyList:["体育","新闻","彩票","明星","娱乐","综艺"]
    }
  },
}
</script>

<style>

</style>