vue父子组件通信以及flex布局

第一步：新建vue-cli项目

第二步：新建子组件

第三步：

子组件代码：

<template>
  <div id="children">
    <p>{{item.name}}</p>
    <p>{{item.age}}</p>
    <p>{{item.gender}}</p>
    <p></p>
    <p></p>
    <button @click="bthHandle">改变测试</button>
  </div>
</template>

<script>
export default {
  name: 'Children',
  props: ['item'],//获取父组件传值
  data(){
    return {

    }
  },
  created(){
    console.log(this.item)
  },
  methods:{
    bthHandle(){
      console.log('点击了子组件')
      // 通过触发自定义事件修改父组件传递的text
      this.item.gender = '你猜';
      this.$emit('event1','我修改了text')
    }
  }
}
</script>

父组件代码：

<template>
  <div class="hello" style="display: flex;flex-wrap:wrap;width:100%">
    <div v-for="item in list" style="border:1px solid #3d3d3d;width:14.28%;box-sizing:border-box;padding:10px;margin-top: 10px">
      <children :item='item' ref="children" @event1="changeText"></children>
    </div>
  </div>
</template>

<script>
import Children from './children'
export default {
  name: 'HelloWorld',
  components: {'children':Children},
  data () {
    return {
      text:'按键的name',
      list:[
        {
          name: '1',
          age: 18,
          gender: '1'
        },{
          name: '2',
          age: 20,
          gender: '2'
        },{
          name: '3',
          age: 19,
          gender: '3'
        },{
          name: '4',
          age: 18,
          gender: '4'
        },{
          name: '5',
          age: 20,
          gender: '5'
        },{
          name: '6',
          age: 19,
          gender: '6'
        },{
          name: '7',
          age: 18,
          gender: '7'
        },{
          name: '8',
          age: 20,
          gender: '8'
        },{
          name: '9',
          age: 19,
          gender: '9'
        }
      ],
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
  },
  methods:{
    changeText (value) {         // 自定义事件修改text的值
      this.gender = value
      console.log(value);
      console.log(this.$refs)
    }
  }
}
</script>

其中，子组件使用了flex布局，每行放置7个子组件，将父组件中的值传入子组件并显示。

注意：给子组件是box-sizing:border-box，这样使用边框就不会占用位置，子组件不会被挤下来。

效果如图：

改变测试点击事件是改变点击子元素的gender属性

如下图所示：