(您有任何疑问,都可以进行提问,我们一起探讨)
前言
您将在本文当中了解到,往网页中添加数据,从传统的dom操作过渡到数据层操作,实现同一个目标,两种不同的方式.以及什么是组件,如何定义和使用组件,父子组件之间如何进行简单的通信传值...,将数据渲染到页面中去的
首先要理解父组件和子组件,他们是一个相对的概念
在上述示例代码中,根组件(app)模板内的代码都属于父组件,而通过Vue.compont()或者局部注册的组件都是子组件
所谓的父组件向子组件传值...,它是保存在父组件中的list数组中,是直接挂载根实例下的,通过按钮的添加操作,将每次新添加的值渲染到指定页面位置当中去
父组件中的数据是无法直接的在子组件中使用的,所以在父组件引用的子组件中,通过v-bind...(父组件向子组件传值,自定义属性,子组件通过props进行接收)
上面示例代码中,实现父组件向子组件传值添加操作,那么现在我想点击每个列表项的时候,能进行逐条删除操作,该怎么实现呢,这就涉及到子组件向父组件传值的问题了...,在父组件中通过v-on绑定自定义属性方式存储父组件中的数据,然后通过props在子组件中接收,这样就可以拿到父组件中的数据
而反过来,在子组件想要向父组件通信传值,通过emit自定义事件向外触发的方式