第一步:新建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属性
如下图所示: