VUE annoid库你用过吗?

按装命令:

npm i annoid

组件中的使用:

<script>
    import {nanoid} from ‘nanoid’
    export default {
        name:’MyHeader’,
        //接收从App传递过来的addTodo
        props:[‘addTodo’],
        data() {
            return {
                //收集用户输入的title
                title:”
            }
        },
        methods: {
            add(){
                //校验数据
                if(!this.title.trim()) return alert(‘输入不能为空’)
                //将用户的输入包装成一个todo对象
                const todoObj = {id:nanoid(),title:this.title,done:false}
                //通知App组件去添加一个todo对象
                this.addTodo(todoObj)
                //清空输入
                this.title = ”
            }
        },
    }
</script>

 

 

分类:

发表评论