vue分成视频帧与声音帧

vue分成视频帧与声音帧对于宽租安全要求不严格的，可以采用这种方式。因为这种全路径一般会长期有效，仅仅通过src=url，不太好做鉴权。 可以通过nginx,apache，tomcat等服务器，配置出文件的url，后慎和兆端返回给前端，前端放入url直接使用。也可以后端提供一个有参get请求接口，前端拼接出该接口的url，参数在url后，根据参数不同，后端接口返回棚液不同数据。该种方式最简单，不再上代码。

首先我们需要观察页面中有哪些组件是需要单独拆分出来独立维护的。一般来说具有以下特性即需要进行组件拆分：

具有复用性质的功能组件（上拉加载下拉刷新、tab切换、轮播等等）

公共组件（公共头部组件、侧边栏组件、公共尾部组件等等）

具有独立逻辑的组件（对话d框、tab页等等）

单文件中代码量庞大

2.2 引入

在父组件中引入子组件。

import Dialog from "./dialog/dialog"

登录后复制

2.3 注册

在父组件中注册组件。

注嫌谈森意： components 与 data(){return{}} 是同级的。

components: {

Dialog,

},

登录后复制

2.4 使用

在父组件中使用。

<div>

<Dialog />

</div>

登录后复制

看到这里，相信你对组件拆分已经有了初步的认识，下面我们用一个更加完整的实例带你深入剖析组件芹亩拆分。

我们就以对话d框为例写一个完整的组件拆分。案例中会用到组件传值，如果对此有疑惑，可参考博侍蠢主另一篇文章 vue组件传值 。

文件结构

/views/popUp 根目录

/views/popUp/index.vue 父组件

/views/popUp/dialog/dialog.vue 子组件

登录后复制

要拆分的组件代码（父组件）

在这段代码中，:dialogChild 、:dialogRow 相当于是在父组件中给子组件标签上绑定了两个属性， 属性上挂载需要传递给子组件的值。.sync 是 vue 中的修饰符，用于实现父子组件数据双向绑定的语法糖。

<template>

<div class="outerBox">

<div>

<el-table :data="tableData" stripe border>

<el-table-column prop="phone" label="联系方式" align="center"></el-table-column>

<el-table-column prop="name" label="姓名" align="center"></el-table-column>

<el-table-column prop="age" label="年龄" align="center"></el-table-column>

<el-table-column prop="stature" label="身高" align="center"></el-table-column>

<el-table-column prop="address" label="住址" align="center"></el-table-column>

<el-table-column prop="c" label=" *** 作" align="center">

<template slot-scope="scope">

<el-button size="small" type="success" icon="el-icon-edit" @click="compileClick(scope.row)">编辑</el-button>

</template>

</el-table-column>

</el-table>

</div>

<!-- 自定义d框 -->

<div>

<Dialog :dialogChild.sync="editDialog.dialogLsattr" :dialogRow="editDialog.dialogRow" />

</div>

</div>

</template>

<script>

import Dialog from "./dialog/dialog"//引入d框组件

export default {

//一定要注册组件

components: {

Dialog,

},

data() {

return {

// 模拟数据

tableData: [

{

phone: "17730818218",

name: "小明",

age: "20",

stature: "173",

address: "昌平",

},

{

phone: "15587477741",

name: "小红",

age: "18",

stature: "162",

address: "海淀",

},

{

phone: "15513252258",

name: "小兰",

age: "19",

stature: "165",

address: "丰台",

},

{

phone: "15512554475",

name: "小黄",

age: "21",

stature: "175",

address: "朝阳",

},

],

// 父组件要传递的数据

editDialog: {

dialogRow: {}, //数据集合

dialogLsattr: false, //打开/关闭d框

},

}

},

mounted() {},

methods: {

// 编辑的点击事件

compileClick(row) {

this.editDialog.dialogRow = { ...row }

this.editDialog.dialogLsattr = true

},

},

}

</script>

<style scoped>

.outerBox {

padding: 16px 20px

}

</style>

登录后复制

被拆分的d框组件代码（子组件）

在这段代码中，子组件通过 props:['父组件标签中定义的属性名'] 来接收数据，当然，在 props 中，你可以通过 type 指定数据的类型，也可以通过 default 指定数据的关键字， default 简单来说就是没有值的时候默认的值。

其中，$emit('update:dialogChild', false) 会触发更新事件（update: props属性值），改变 dialogChild 的值。

<template>

<el-dialog title="标题" width="30%" :visible.sync="dialogVisible" @close="$emit('update:dialogChild', false)"></el-dialog>

</template>

<script>

export default {

data() {

return {

dialogVisible: false, //打开/关闭d框

dataList: {}, //接收数据集合

}

},

//通过props接收父组件传递的数据

props: {

//d框打开关闭的值

dialogChild: {

type: Boolean, //验证类型，也可以验证其他类型

default: false, //如果父组件传值，则用父组件的值渲染，反之使用默认值

},

//表格点击当前行的数据

dialogRow: {

type: Object,

default: false,

},

},

methods: {

//将方法放在监听当中是为了防止子组件在没有被调用之前就会执行其中方法

postRemoteSensingMonitoringDetails() {

console.log("执行方法 ")

}

},

//通过watch监听父组件传递的数据并赋值，然后动态改变d框的打开/关闭，动态改变数据的变化

watch: {

dialogChild(val) {

console.log("d框的状态:", val)

this.dialogVisible = val

this.postRemoteSensingMonitoringDetails()//调用方法

},

dialogRow(val) {

console.log("当前的数据:", { ...val })

this.dataList = val

},

},

}

</script>

登录后复制

最终实现效果

子组件中打印的值

---