jQuery自定义插件、vue自定义组件、react自定义组件

前言

前些天有个表弟问我vue的自定义组件是啥，我也是一阵无语，一直写的都不知道是干啥的。这里我有寻找了下jQuery中的自定义组件方法，希望对此模糊的同学能有更清晰的理解。

JQuery自定义组件

1.jQuery.fn.extend(object)

object：用来扩充 jQuery 对象。

例如：

增加两个插件方法。

代码：
jQuery.fn.extend({
    	check: function() {
     		return this.each(function() { this.checked = true; });
    	},
        uncheck: function() {
          	return this.each(function() { this.checked = false; });
        }
});
结果：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

2.jQuery.extend(object)

object：用来扩充 jQuery 对象。

例如：

在jQuery命名空间上增加两个函数。

代码：
jQuery.extend({
	min: function(a, b) { return a < b ? a : b; },
  	max: function(a, b) { return a > b ? a : b; }
  });
结果：
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5

3.jQuery.noConflict([extreme]) 说个题外话，这是jQuery的多库共存，也就是替换$

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
extreme：传入 true 来允许彻底将jQuery变量还原。
例如：
完全将 jQuery 移到一个新的命名空间。

jQ代码：
var dom = {};
dom.query = jQuery.noConflict(true);

结果：
dom.query("div p").hide();		// 新 jQuery 的代码
$("content").style.display = 'none';	// 另一个库 $() 的代码
jQuery("div > p").hide();		// 另一个版本 jQuery 的代码

Vue自定义组件

怎么说呢，最简单的说就是每一个 .vue文件都是一个组件。所以剩下的就不用我说了吧 ^ _ ^

白色的是引入组件，红色的是全局安装，带下划线的是组件的名字，黄色的是导出组件，缺一不可

现在组件已经封装好了，怎么用？跟其他组件一样使用

打开 main.js  加上

import sjld from './components/sjld/index.js'

Vue.use(sjld);

然后在项目中任意处

<sjld :citys="citys" :sheng="sheng" @change="change"></sjld>

citys ,cheng 对应组件中 props 

chang 对应组件中$emit的方法

react自定义组件

示例：创建一个名叫MyCommponent的组件

第一步：导入 React 和 Component

import React ,{Component}from 'react'	//React和Component都是内置的

第二步：定义类

import React ,{Component}from 'react'  //导入 React Component/，React和Component都是内置的

class MyCommpent extends Component{ //定义类继承 Compoent 
    render(){ //render就是返回一个标签        
        return(
            <div>
                <h1>我是自定义组件</h1>
            </div>
        )
    }
}

export default MyCommpent ;  //将此标签导出 。方便其他地方的调用使用

第四步：其他地方的导入并使用此标签

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

import MyCommpent from './MyCommpent'  //导出组件 方便使用


ReactDOM.render(<MyCommpent/>,document.getElementById('root'))


registerServiceWorker();

第五步：没啦啊，这就成了，想看结果？去试试吧，哈哈。

后言

千里之行始于足下，如果内容存在错误或者表达不当，还望及时告知，当然若是有所帮助请给颗小心心加个关注。whj