Day24 Vue 认识Porps(3)

以物件做props的传递

我们先来看看一个例子!
在这里我们先用props把外层元件的data里的items的阵列传递近来，然後在template里去写我们要呈现出来的HTML。

这里我们运用v-for将items里的资讯列出来，然後加入一个子元件，同样用 v-for 来渲染 items，并将 item 当作 prop 传入。

最後我们呈现出来的画面就像这样，顺便把父子元件的位置标出来，看似没问题但其实这里有个bug。

当我们去改动input的资料时，我们items里的资料也会被改动，可是现在我不想动到外层元件的资料要怎麽办呢?

在前面我们是把整个物件传递到子元件，但现在我们是先把物件属性解构成原始类别(Primitive)後再将资料传出去，就可以写下面这样。

像这样，将传入的props解构成纯值的作法，更新时就不会改写到外层的资料了。

今天就先到这了，明天见~