VUE组件、传值

VUE组件、传值

组件（Component）是 Vue.js 最强大的功能之一，可以扩展 HTML 元素，封装可重用的代码。
1、在src中components中,新建Header.vue组件（首字母建议大写，避免冲突）

2.在app.vue中引用组件
首先引入组件

然后在export default注册组件

最后使用组件

传值

1、.父传子：父组件向子组件进行传值props
方法：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，可以使用 props 向子组件传递数据。

父：

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子：

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

2、子传父
子组件主要通过事件传递数据给父组件
子传父的实现方式就是用了 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，最后返回 this.msg

子：

<template>
    <div id="container">
        <input type="text" v-model="msg">
        <button @click="setData">传递到父组件</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "传递给父组件的值"
    };
  },
  methods: {
    setData() {
      this.$emit("getData", this.msg);
    }
  }
};
</script>
<style scoped>
#container {
  color: red;
  margin-top: 50px;
}
</style>

父

<template>
    <div id="container">
        <Header @getData="getData"></Header>
        <p>{{msg}}</p>
    </div>
</template>
<script>
import Header from "@/components/Header";
export default {
  data() {
    return {
      msg: "我要接收子组件的消息"
    };
  },
  methods: {
    getData(data) {
      this.msg = data;
    }
  },
  components: {
    Header
  }
};
</script>
<style scoped>
</style>