vue-cli之组件之间传值展示数据

一. 父组件传值到子组件

(一). 定义一个子组件

在src/components下创建一个Table.vue的组件，内容如下：

<template>
    <div v-if="item">
        <p>
            <span>{{item.id}}</span>
            <span>{{item.title}}</span>
        </p>
    </div>
</template>

<script>
    export default {
        name: "Table",
        props: ['item']
    }
</script>

<style scoped>

</style>

(二). 父组件

App.vue内容如下：

<template>
  <div id="app">
    <div>
      <button @click="toggle">切换数据二</button>
      <button @click="toggle1">切换数据二</button>
      <Table :item="item"></Table>
    </div>
  </div>
</template>

<script>
import Table from './components/Table' // 引入组件。

export default {
  name: 'App',
  data(){
    return {
      item: {} // 定义一个初始值
    }
  },
  components: {
    Table // 注册组件
  },
  created(){ // 加载页面前就赋值 item
    this.item = {'id': 3, 'title': '默认数据'};
  },
  methods:{
    toggle(){
      console.log('toggle');
      this.item = {'id': 1, 'title': 'aaa'};
    },
    toggle1(){
      console.log('toggle1');
      this.item = {'id': 2, 'title': 'bbb'};
    }
  }
}
</script>

<style>

</style>

父组件中使用了<Table :item="item"></Table>使用引入的Table组件。:item对应Table.vue中的props里的某个值。item是传给Table.vue组件的展示数据。