VUE父子组件通信和Clipboard复制功能实现

                                                      VUE父子组件通信和Clipboard复制功能实现

一、VUE父子组件通信

引入组件转标签命名规则是驼峰转横线

父组件

VUE父子组件通信和Clipboard复制功能实现

 handleDelete方法写法:这里展示是一个删除功能

VUE父子组件通信和Clipboard复制功能实现

子组件

VUE父子组件通信和Clipboard复制功能实现

父子组件通信情况从上面两张图已经可以明确表示了,说明如下:

1、父组件传值给子组件

在子组件里面编写

props: [] 可以是对象也可以数组

props: {

    userId: String,

    default: ''

}

父组件里面子组件标签前半部分编写:

:userId="xxx"

2、子组件传值给父组件

子组件里面编写:

this.$emit('delete', xxx)

父组件里面子组件标签前半部分编写:

@delete="handledelete"方法

二、Clipboard复制功能

1、安装Cliboard组件并import引入

(1)安装命令如下

npm install clipboard --save

(2)引入

import Clipboard from 'clipboard'

comments: {

    Clipboard

}

2、hmtl如下:

VUE父子组件通信和Clipboard复制功能实现

3、js如下

VUE父子组件通信和Clipboard复制功能实现

至此ok