vue入门实战（二）父子组件显示，参数传递

经过上次的写法，我们已经写出每个list项，现在要在每个父组件下面加入自己的子项
一、新建子组件：
smallItem.vue：

<script>
export default{
    props:['text','id','status']//父组件传来的参数
}
</script>
<template>
(...html代码...)
<input class="item_child_input form-control" :value=text>
//这里的text就是props传进来的text
</template>

二、在父组件里引入子组件：
item.vue:

<script>
import smallItem from './smallItem.vue'//引入子组件
export default{
components:{
        smallItem//声明组件
    }
}
</script>
<template>
<div class="children_div" v-if="IsOpen">//循环调用
<smallItem v-for="child in children" :key="child.id" :status=child.status :text=child.text :id=child.id></smallItem>
    </div>
</template>

注意：
1.循环时在v-for后面要加:key，不然会报错
2.:id写在最后
3.样式调整：
由于vue采用flex布局，有时会出现元素错乱的情况，这里我在index.html里加入了一句样式

<style>
  #app{
    grid-template-columns: 1fr;
  }
</style>

呈现效果：

大家可以看一下dom的渲染：

三、加入事件
在子组件里，我们加入了一个点击事件：
smallItem.vue:

methods:{
        Check(event){
            this.checkStatus = this.checkStatus == 0 ? 1 : 0;
        }
    },

(这里本来是命名为status，但vs提示说status被弃用，我猜应该是status是vue关键字，于是换了一个名字checkStatus)
开始测试，触发Check事件发现，控制台报错说this里面的变量是不允许被set的：
TypeError: ‘set’ on proxy: trap returned falsish for property ‘checkStatus’
这里的checkStatus当然就是props里面的变量，是不允许被改变的；
于是在本组件里定义一个自己的变量：

data(){
        return{
            checkStatus:this.checkStatus
        }
    }

这时的this.checkStatus就变成了我们重新定义的这个变量，就可以赋值了
实现效果：
点击子组件的对号小图标，记录为已完成
这里发现了一个问题，this.checkStatus在下次的调用被改回来了，我想可能是data里的return没有return我赋的值，这里暂时还不知道怎么解决，明天再看

原文地址：https://blog.csdn.net/weixin_37778355/article/details/144348904

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！