一文快速详解前端框架 Vue 最强大的功能

组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:

如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。

针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式,如props、 $emit/ $on、vuex、 $parent / $children、 $attrs/ $listeners和provide/inject,以通俗易懂的实例讲述这其中的差别及使用场景,希望对小伙伴有些许帮助。

本文的代码请猛戳https://github.com/ljianshu/Blog,纸上得来终觉浅,大家动手多敲敲代码!

方法一、 props/ $emit

父组件A通过props的方式向子组件B传递,B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父组件向子组件传值

接下来我们通过一个例子,说明父组件如何向子组件传递值:在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]

//App.vue父组件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
</div>
</template>
<script> import Users from "./components/Users" export default { name: 'App', data(){ return{  users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } } //users子组件 <template> <div class="hello"> <ul> <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面 </ul> </div> </template> <script> export default { name: 'HelloWorld', props:{  users:{   //这个就是父组件中子标签自定义名字  type:Array,  required:true } } } </script>

总结:父组件通过props向下传递数据给子组件。注:组件中的数据共有三种形式:data、props、computed

2.子组件向父组件传值(通过事件形式)

接下来我们通过一个例子,说明子组件如何向父组件传递值:当我们点击“Vue.js Demo”后,子组件向父组件传递值,文字由原来的“传递的是一个值”变成“子向父组件传值”,实现子组件向父组件值的传递。

// 子组件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
</header>
</template>
<script> export default { name: 'app-header', data() { return {  title:"Vue.js Demo" } }, methods:{  changeTitle() { this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值” } } } </script>
// 父组件
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
// updateTitle($event)接受传递过来的文字
<h2>{{title}}</h2>
</div>
</template>
<script> import Header from "./components/Header" export default { name: 'App', data(){ return{  title:"传递的是一个值" } }, methods:{  updateTitle(e){ //声明这个函数 this.title = e; } }, components:{ "app-header":Header, } } </script>

总结:子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件。

方法二、 $emit/ $on

这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vuex。

1.具体实现方式:

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

2.举个例子

假设兄弟组件有三个,分别是A、B、C组件,C组件如何获取A或者B组件的数据。

<div id="itany">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<h3>A组件:{{name}}</h3>
<button @click="send">将数据发送给C组件</button>
</div>
</template>
<template id="b">
<div>
<h3>B组件:{{age}}</h3>
<button @click="send">将数组发送给C组件</button>
</div>
</template>
<template id="c">
<div>
<h3>C组件:{{name}},{{age}}</h3>
</div>
</template>
<script> var Event = new Vue();//定义一个空的Vue实例 var A = {  template: '#a',  data() { return {   name: 'tom' } },  methods: {  send() { Event.$emit('data-a', this.name); } } } var B = {  template: '#b',  data() { return {   age: 20 } },  methods: {  send() { Event.$emit('data-b', this.age); } } } var C = {  template: '#c',  data() { return {   name: '',   age: "" } },  mounted() {//在模板编译完成后执行 Event.$on('data-a',name => { this.name = name;//箭头函数内部不会产生新的this,这边如果不用=>,this指代Event }) Event.$on('data-b',age => { this.age = age; }) } } var vm = new Vue({  el: '#itany',  components: { 'my-a': A, 'my-b': B, 'my-c': C } });
 </script>

$on 监听了自定义事件 data-a和data-b,因为有时不确定何时会触发事件,一般会在 mounted 或 created 钩子中来监听。

方法三、vuex

1.简要介绍Vuex原理

Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。

而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action,但Action也是无法直接修改State的,还是需要通过Mutation来修改State的数据。最后,根据State的变化,渲染到视图上。

2.简要介绍各模块在流程中的功能:

Vue Components:Vue组件。HTML页面上,负责接收用户操作等交互行为,执行dispatch方法触发对应action进行回应。

dispatch:操作行为触发方法,是唯一能执行action的方法。

actions:操作行为处理模块,由组件中的 $store.dispatch('action 名称',data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行,包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装,以支持action的链式触发。

commit:状态改变提交操作方法。对mutation进行提交,是唯一能执行mutation的方法。

mutations:状态改变操作方法,由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些hook暴露出来,以进行state的监控等。

state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需的数据从该对象中进行读取,利用Vue的细粒度数据响应机制来进行高效的状态更新。

getters:state对象读取方法。图中没有单独列出该模块,应该被包含在了render中,Vue Components通过该方法读取全局state对象。

3.Vuex与localStorage

vuex 是 vue 的状态管理器,存储的数据是响应式的。但是并不会保存起来,刷新之后就回到了初始状态,具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面,刷新之后,如果localStorage里有保存的数据,取出来再替换store里的state。

let defaultCity = "上海"
try { // 用户关闭了本地存储功能,此时在外层加个try...catch
if (!defaultCity){
 defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
}
}catch(e){}
export default new Vuex.Store({
 state: {
 city: defaultCity
},
 mutations: {
 changeCity(state, city) {
  state.city = city
try {
  window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
// 数据改变的时候把数据拷贝一份保存到localStorage里面
} catch (e) {}
}
}
})

这里需要注意的是:由于vuex里,我们保存的状态,都是数组,而localStorage只支持字符串,所以需要用JSON转换:

JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array 

 方法四、 $attrs/ $listeners 1.简介

多级组件嵌套需要传递数据时,通常使用的方法是通过vuex。但如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,未免有点大材小用。为此Vue2.4 版本提供了另一种方法---- $attrs/ $listeners

$attrs:包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

接下来我们看个跨级通信的例子:

// index.vue
<template>
<div>
<h2>浪里行舟</h2>
<child-com1 :foo="foo" :boo="boo" :coo="coo" :doo="doo"  title="前端工匠" ></child-com1>
</div>
</template>
<script> const childCom1 = () => import("./childCom1.vue"); export default { components: { childCom1 }, data() { return {  foo: "Javascript",  boo: "Html",  coo: "CSS",  doo: "Vue" }; } }; </script>
// childCom1.vue
<template class="border">
<div>
<p>foo: {{ foo }}</p>
<p>childCom1的$attrs: {{ $attrs }}</p>
<child-com2 v-bind="$attrs"></child-com2>
</div>
</template>
<script> const childCom2 = () => import("./childCom2.vue"); export default { components: {  childCom2 }, inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性 props: {  foo: String // foo作为props属性绑定 }, created() {  console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" } } }; </script>
// childCom2.vue
<template>
<div class="border">
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script> const childCom3 = () => import("./childCom3.vue"); export default { components: {  childCom3 }, inheritAttrs: false, props: {  boo: String }, created() {  console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" } } }; </script>
// childCom3.vue
<template>
<div class="border">
<p>childCom3: {{ $attrs }}</p>
</div>
</template>
<script> export default { props: {  coo: String,  title: String } }; </script>

如上图所示 $attrs表示没有继承数据的对象,格式为{属性名:属性值}。Vue2.4提供了 $attrs , $listeners 来传递数据与事件,跨级组件之间的通讯变得更简单。

简单来说: $attrs与 $listeners 是两个对象, $attrs 里存放的是父组件中绑定的非 Props 属性, $listeners里存放的是父组件中绑定的非原生事件。

方法五、provide/inject

1.简介

Vue2.2.0新增API,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。一言而蔽之:祖先组件中通过provider来提供变量,然后在子孙组件中通过inject来注入变量。provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。

2.举个例子

假设有两个组件: A.vue 和 B.vue,B 是 A 的子组件

// A.vue
export default {
 provide: {
 name: '浪里行舟'
}
}
// B.vue
export default {
 inject: ['name'],
 mounted () {
 console.log(this.name); // 浪里行舟
}
}

可以看到,在 A.vue 里,我们设置了一个 provide: name,值为 浪里行舟,它的作用就是将 name 这个变量提供给它的所有子组件。

而在 B.vue 中,通过 inject 注入了从 A 组件中提供的 name 变量,那么在组件 B 中,就可以直接通过 this.name 访问这个变量了,它的值也是 浪里行舟。这就是 provide / inject API 最核心的用法。

需要注意的是:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的----vue官方文档 所以,上面 A.vue 的 name 如果改变了,B.vue 的 this.name 是不会改变的,仍然是 浪里行舟。

3.provide与inject 怎么实现数据响应式

一般来说,有两种办法:

provide祖先组件的实例,然后在子孙组件中注入依赖,这样就可以在子孙组件中直接修改祖先组件的实例的属性,不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如props,methods

使用2.6最新API Vue.observable 优化响应式 provide(推荐)

我们来看个例子:孙组件D、E和F获取A组件传递过来的color值,并能实现数据响应式变化,即A组件的color变化后,组件D、E、F不会跟着变(核心代码如下:)

// A 组件
<div>
  <h1>A 组件</h1>
  <button @click="() => changeColor()">改变color</button>
  <ChildrenB />
  <ChildrenC />
</div>
......
 data() {
 return {
  color: "blue"
 };
 },
 // provide() {
 // return {
 //  theme: {
 //  color: this.color //这种方式绑定的数据并不是可响应的
 //  } // 即A组件的color变化后,组件D、E、F不会跟着变
 // };
 // },
 provide() {
 return {
  theme: this//方法一:提供祖先组件的实例
 };
 },
 methods: {
 changeColor(color) {
  if (color) {
  this.color = color;
  } else {
  this.color = this.color === "blue" ? "red" : "blue";
  }
 }
 }
 // 方法二:使用2.6最新API Vue.observable 优化响应式 provide
 // provide() {
 // this.theme = Vue.observable({
 //  color: "blue"
 // });
 // return {
 //  theme: this.theme
 // };
 // },
 // methods: {
 // changeColor(color) {
 //  if (color) {
 //  this.theme.color = color;
 //  } else {
 //  this.theme.color = this.theme.color === "blue" ? "red" : "blue";
 //  }
 // }
 // }
// F 组件
<template functional>
 <div class="border2">
 <h3 :style="{ color: injections.theme.color }">F 组件</h3>
 </div>
</template>
<script> export default { inject: {  theme: {  //函数式组件取值不一样  default: () => ({})  } } }; </script>

虽说provide 和 inject 主要为高阶插件/组件库提供用例,但如果你能在业务中熟练运用,可以达到事半功倍的效果!

方法六、 $parent / $children& ref

ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例

$parent / $children:访问父 / 子实例

需要注意的是:这两种都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据。我们先来看个用 ref来访问组件的例子:

// component-a 子组件
export default {
 data () {
return {
  title: 'Vue.js'
}
},
 methods: {
 sayHello () {
  window.alert('Hello');
}
}
}
// 父组件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default {
 mounted () {
const comA = this.$refs.comA;
  console.log(comA.title); // Vue.js
  comA.sayHello(); // 弹窗
}
}
</script>

不过,这两种方法的弊端是,无法在跨级或兄弟间通信。

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>

我们想在 component-a 中,访问到引用它的页面中(这里就是 parent.vue)的两个 component-b 组件,那这种情况下,就得配置额外的插件或工具了,比如 Vuex 和 Bus 的解决方案。

总结

常见使用场景可以分为三类:

父子通信: 父向子传递数据是通过 props,子向父是通过 events( $emit);

通过父链 / 子链也可以通信( $parent / $children);

ref 也可以访问组件实例;

provide / inject API; 

$attrs/$listeners

兄弟通信: Bus;Vuex

跨级通信: Bus;Vuex;provide / inject API、 $attrs/$listeners

总结

以上所述是小编给大家带来的一文快速详解前端框架 Vue 最强大的功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • 前端框架Vue.js构建大型应用浅析

    真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖

  • layui前端框架之table表数据的刷新方法

    最简单的方法就是: //当前页的刷新 $(".layui-laypage-btn")[0].click(); 以上这篇layui前端框架之table表数据的刷新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 前端框架学习总结之Angular、React与Vue的比较详解

    近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • 前端框架Vue.js中Directive知识详解

    Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对

  • 详解能在多种前端框架下使用的表格控件

    近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

  • jQuery前端框架easyui使用Dialog时bug处理

    最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 复制代码 代码如下: <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />     <div id="confirmd">

  • 一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $lis

  • 详解Laravel框架的依赖注入功能

    概述 任何时候,你在一个控制器类中请求一个依赖,这个服务容器负责: 1.自动地在构造函数中检测依赖关系 2.如果需要构建这个依赖关系 3.通过构造函数创建对象形成依赖关系 来看一个非常简单的例子. <?php namespace App\Http\Controllers; use App\User; use App\Repositories\UserRepository; use App\Http\Controllers\Controller; class UserController exte

  • 详解React Angular Vue三大前端技术

    一.[React] React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库.它由Facebook和一个由个人开发者和公司组成的社区来维护. React可以作为开发单页或移动应用的基础.然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子. 基本用法 下面是一个简单的React在HTML中使用JSX和JavaScript的例子. Greeter函数

  • 小白教程|一小时上手最流行的前端框架vue(推荐)

    前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架.相比angular和react,vue更加轻巧.高性能.也很容易上手.大家也可以移步vue官网,看一下它的介绍和核心功能介绍.简单粗暴的理解就是:用vue开发的时候,就是操作数据,然后vue就会处理,以数据驱动去改变DOM.使用vue,我们可以集中精力于如何处理数据上,数据改变后,页面显示也会随之改变.相比jquery那种操作DOM元素的开发方式,能有效提高开发效率,个人觉

  • webpack安装配置与常见使用过程详解(结合vue)

    webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack

  • 详解前端任务构建利器Gulp.js使用指南

    概述 在软件开发中,任务运行器的好处是不言而喻的.它们可以帮助自动运行常见的冗长的任务,让你可以专注于更重要的事情中,比如敲出很棒的代码.说的严肃点,自动运行一些比如图片压缩.代码压缩.单元测试以及更多的任务的技能,简直就是节省时间的利器. 对于很多前端开发者而言,时下使用最多的任务管理器就是Grunt了,一个可以让你在Gruntfile.js文件中使用JavaScript定义各种运行任务的工具.基本上,只要你了解JavaScript,创建一个Grunt任务是非常简单直接的事情.丰富的第三方插件

  • Doris Join 优化原理文档详解

    目录 Doris Join 优化原理 Doris Shuffle 方式 四种 Shuffle 方式对比 Runtime Filter Join 优化 Runtime Filter 类型 Join Reorder Doris Join 调优方法 调优案例实战 案例一 案例二 案例三 Doris Join 调优建议 Doris Join 优化原理 Doris 支持两种物理算子,一类是 Hash Join,另一类是 Nest Loop Join. Hash Join:在右表上根据等值 Join 列建立

  • spring boot集成smart-doc自动生成接口文档详解

    目录 前言 功能特性 1 项目中创建 /src/main/resources/smart-doc.json配置文件 2 配置内容如下(指定文档的输出路径) 3 pom.xml下添加配置 4 运行插件 5 找到存放路径浏览器打开 6 测试结果 前言 smart-doc 是一款同时支持 java restful api 和 Apache Dubbo rpc 接口文档生成的工具,smart-doc 颠覆了传统类似 swagger 这种大量采用注解侵入来生成文档的实现方法. smart-doc 完全基于

  • 详解Spring框架入门

    一.什么是Spring Spring框架是由于软件开发的复杂性而创建的.Spring使用的是基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途不仅仅限于服务器端的开发.从简单性.可测试性和松耦合性角度而言,绝大部分Java应用都可以从Spring中受益.Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. ◆目的:解决企业应用开发的复杂性 ◆功能:使用基本的JavaBean代替EJB,并提供了更多的企业应用功能 ◆范围:任何Java应用 二.

  • ffmpeg播放器实现详解之框架搭建过程

    ffplay是ffmpeg源码中一个自带的开源播放器实例,同时支持本地视频文件的播放以及在线流媒体播放,功能非常强大. FFplay: FFplay is a very simple and portable media player using the FFmpeg libraries and the SDL library. It is mostly used as a testbed for the various FFmpeg APIs. ffplay中的代码充分调用了ffmpeg中的函

随机推荐