网站后台界面设计,汕头网站公司,河南建设信息网一体化,推广软文200字经过上次的写法#xff0c;我们已经写出每个list项#xff0c;现在要在每个父组件下面加入自己的子项 一、新建子组件#xff1a; smallItem.vue#xff1a;
script
export default{props:[text,id,status] //父组件传来的参数
}
/script
template我们已经写出每个list项现在要在每个父组件下面加入自己的子项 一、新建子组件 smallItem.vue
script
export default{props:[text,id,status] //父组件传来的参数
}
/script
template(...html代码...)input classitem_child_input form-control :valuetext//这里的text就是props传进来的text
/template二、在父组件里引入子组件 item.vue:
scriptimport smallItem from ./smallItem.vue //引入子组件export default{components:{smallItem //声明组件}}
/script
templatediv classchildren_div v-ifIsOpen //循环调用smallItem v-forchild in children :keychild.id :statuschild.status :textchild.text :idchild.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我赋的值这里暂时还不知道怎么解决明天再看
