vue组件使用（脚手架中使用）

父组件

// 父组件
<template>
  <div id="app">
    <img src="./assets/logo.png">

    <!-- 路由的方法 -->
    <!-- <router-view/>    -->

    <!-- 组件的方法  tittle="My journey with Vue"  绑定静态tittle向子组件传值-->
    <hellow tittle="My journey with Vue"></hellow>
    <!-- <hellow v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" v-bind:posts="posts"></hellow> -->
    <!-- 组件的方法 动态绑定posts向子组件传值  数组-->
    <!-- 组件的方法  接收子组件发送的消息  v-on:enlarge-text 对应子组件的的方法名-->
    <hellow v-bind:posts="posts" v-on:enlarge-text="onEnlargeText"></hellow>

    <div :style="{ fontSize: postFontSize + 'rem' }">你好你好</div>
  </div>
</template>

<script>
  // 引用组件模板
  import Hello from "@/components/HelloWorld";

  export default {
    name: "App",
    data() {
      return {
        posts: [{
            id: 1,
            title: "My journey with Vue"
          },
          {
            id: 2,
            title: "Blogging with Vue"
          },
          {
            id: 3,
            title: "Why Vue is so fun"
          }
        ],
        postFontSize: 1
      };
    },
    // 组件声明
    components: {
      hellow: Hello
    },
    methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount;
      }
    }
  };

</script>

子组件

<template>
  <div class="hello">
    <!-- <h1>{{ msg }}</h1> -->
    <!-- 接受的父组件传过来的值 -->
    <p>{{tittle}}</p>

    <!-- 接受的父组件传过来的数组 -->
    <ul>
      <li v-for="posts in posts" :key='posts.id'>{{posts.title}}</li>
    </ul>


    <!-- 通过事件向父级组件发送消息 注册一个事件-->
    <button v-on:click="$emit('enlarge-text', 0.1)">
      文字变大
    </button>

    <input type="text" v-model="input">
    <p>{{input}}</p>

  </div>
</template>

<script>
  import {
    mapState
  } from "vuex";

  export default {
    name: "HelloWorld",
    data() {
      return {
        msg: "Welcome to Your Vue.js App",
        input:''
      };
    },
    //接收父组件传过来的值
    props: {
      tittle: String,
      posts: Array,

    },
    components: {},
    created() {
      console.log(this.$store.state.count);
    },
    mounted() {
      },
    methods: {},
    computed: {}
  };

</script>