Vue组件的使用_IT百科

通过ref来获取页面上的dom

若在一个组件<item>中添加上ref，那么获取到的dom就是对应的组件，也就是可以获取到组件的引用。

可以获取到组件中定义的data数据

父组件传值给子组件通过属性来传。

过来的值赋值给定义的值，然后修改那个值

子组件通过事件触发来向父组件传值

定义一个全局组件

父组件给子组件通过属性传递一些值，而子组件做的一些约束就是组件的参数校验

父组件要传一个名叫content的属性，而子组件刚好定义了content的prop，这个就是props特性

非props特性

例如：给子组件的标签中定义一个click事件

上面的实现是错误的，原因就是在子组件中定义的@click中的click是监听的自定义事件的名称，它是接收子组件触发的事件名称，如：this.$emit('click')，@click是接收这样的事件的，并不是我们熟知的点击事件

实现上面的例子

方法一：

方法二

在click中添加.native就可标明为原生事件

方法一，使用Vuex

方法二，使用发布订阅模式，也称为总线机制

怎么使父组件给子组件优雅的传递dom，例如父组件要给子组件传递<p>Dell</p>

按以往的方法应该是

使用slot可以解决问题

如果template中有多个<slot>，那怎么确定哪个slot要那些dom呢

可以通过名称来确定对应的dom，如

通过动态组件来怎么实现呢

切换的时候，每次都是先销毁，然后再创建子组件，每次切换都销毁和创建

v-once就是为了避免这种情况的发生，使用v-once第一次展示的时候，会将组件放到内存中，第二次就不需要创建组件了，可以直接从内存中读取到

参考

Vue.js API文档

慕课网：Vue2.5开发去哪儿网App 从零基础入门到实战项目

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div>中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div>之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template>标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

</div>

</li>

欢迎分享，转载请注明来源：内存溢出

Vue组件的使用