Reactjs 踏坑指南2： JSX&&组件

JSX 知识准备

JSX 并不是一门全新的语言，仅仅是一个语法糖，允许开发者在javascript中编写XML语言。这样使用JavaScript来构建组件以及组件之间关系的应用，在代码层面显得更加清晰，而不再是使用JavaScript操作DOM来创建组件以及组件之间的嵌套关系。

作为是React的核心部分，JSX使用XML标记的方式直接声明页面。在JavaScript代码里直接写XML的语法，每一个XML标签都会被JSX转换工具转换成纯JavaScript代码。HTML直接写到JavaScript中不加任何分号，这就是JSX的语法奥义

JSX环境准备

JSX必须借助ReactJS环境才能运行。在编写JSX代码之前，需要先加载ReactJS文件，比react.js.光有ReactJs还不行，还需要加载JSX解析器。下面大家一起准备好一个最基础的ReactJS环境

创建一个test.html文件

在<head>标签中引入如下文件

  <script src="http://cdn.bootcss.com/react/15.2.0/react.js"></script>
  <script src="http://cdn.bootcss.com/react/15.2.0/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

这样环境就搭建好了，然后按照惯例，双手奉上一个Hello World 程序。

  <body>
    <div id="example"></div>
    <script type="text/babel">
      var HelloComponent = React.createClass({
        render: function(){
          return <span>Hello World !</span>
        }
      });
      
      ReactDOM.render(
        <HelloComponent />,
        document.getElementById('example')
      );
    </script>
  </body>

运行结果

如上面代码，我们在JavaScript中书写HTML标签时，不再像以前那样作为字符串用引号引起来，而是想在XML文件中书写一样，直接写即可。

除了<span>Hello World !</span>这种直接使用的HTML标签外，还有一个<HelloComponent />标签。这个是ReactJS创建的组件类标签，通过这种方式，把创建的HelloComponent组件引用进来。ReactJS约定，自定义的组件标签首字母一定要大些，用来区分是组件标签还是HTML标签。

注意几点

script 标签的 type 属性为 text/babel，这是React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是在页面中直接使用 JSX 的地方，都要加上 type="text/babel"。
一共用了三个库： react.js 、react-dom.js 和 browser.min.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能， browser.min.js的作用是将 JSX 语法转为 JavaScript 语法。
将 JSX 语法转为 JavaScript 语法，这一步很消耗时间。现在前端项目，都会使用前端工程化，不会直接在html页面中直接写js代码，写好的js代码都会使用工具进行编译压缩等。这样的话，我们的jsx也会通过编译直接转化成js语法，让浏览器直接使用。

JSX执行JavaScript表达式

JSX使用{}来执行JavaScript表达式。

var arr = [
 <h1>Hello world!</h1>,
 <h2>React is awesome</h2>,
];
ReactDOM.render(
 <div>{arr}</div>,
 document.getElementById('example')
);

JSX定义属性&&样式使用

HTML中可以通过标签上的属性来改变当前元素的样式，当然，这在JSX中也是可以的，只不过JSX在使用行内样式的时候是有缺陷的。。使用{{}}而不是引号的方式，如下

React.render(
    <div style={{color:'red',marginTop:'20px'}}>
        xxxxx
    </div>,
    document.body
);

注：直接在标签上使用style属性时，要写成style={{}}是两个大括号，外层大括号是告知jsx这里是js语法，和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。即margin-top要写成marginTop，属性之间以逗号间隔。还有class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

JSX中的延展属性

在JSX中我们可以使用ES6中的最新语法...来遍历对象

  var HelloMessage = React.createClass({
    render: function() {
      return <h1>Hello {this.props.name}  get {this.props.votes} votes</h1>;
    }
  });

  var Lucy = {
    name: "feng",
    votes: "23"
  }

  ReactDOM.render(
  <HelloMessage {...Lucy} />,
    document.getElementById('example')
  );

JSX中的事件绑定

JSX支持事件的绑定，语法类似于HTML中事件的绑定，不同的是这里事件的名称必须按照驼峰式，下面给个例子大家参考一下。

var HelloComponent = React.createClass({
    testClick: function (str) {
      alert('hello ' +  str)
    },
    render: function() {
      return (
          <p
          onClick={this.testClick.bind(this, 'feng')} style={{olor:'#ff6600',width:'200px', height:'100p'}}
          >
          Click me
          </p>
          )
        
    }
  })

  
  ReactDOM.render(
  <HelloComponent  />,
    document.getElementById('example')
  );

知晓了JSX的基本使用之后，开始介绍ReactJS的组件的概念和使用方法

组件初步

ReactJS的基础就是实例化，即按功能封装成一个又一个的组件，各个组件维护自己的状态和UI，当状态改变时，会自动重新渲染整个组件，多个组件一起协作构成了整个ReactJS应用。

以一个简单的Hello World开始

<head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://cdn.bootcss.com/react/15.2.0/react.js"></script>
    <script src="http://cdn.bootcss.com/react/15.2.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<head>
<body>
    <div id="example"></div>
    <script type="text/babel">
          var HelloMessage = React.createClass({
            render: function() {
                  return <div>Hello,{this.props.name}</div>
            }
          })
          ReactDOM.render(<HelloMessage name="World" />, document.getElementById('example'))
    </script>
</body>

http://www.bootcdn.cn/react/

运行结果：

运行结果

审查元素发现DOM结构如下：

上面的代码中，我们调用React提供的工厂方法来创建组件，其中：

React是全局对象，ReactJS的所有顶级API都挂在这个对象下。
React.createClass是ReactJS用来创建组件类的方法，这个对象必须包含一个render方法和若干可选的生命周期（详情请见下文）方法,其中
render是一个组件级的API,是React.createClass内部最常用的API，该方法主要用来返回组件结构
React.render(这里我用的是ReactDOM.render)是最常用的方法，用于将模板转换成HTML语言，并将转换后的DOM结构插入到制定的DOM节点上
简而言之就是：先通过React.createClass来创建一个组件类，调用组件的render方法输出组件的DOM结构，最后调用React.render将组建插入到id为example的节点上

这里我们需要保证render函数是纯函数：即同样的输入始终返回相同的输出，并且执行过程中没有副作用（和DOM交互或者发Ajax请求）。但一个组件要和DOM交互或者发Ajax请求需求是很正常的，那么就要用到其他生命周期方法了。

组件的状态与属性

组件本质上是状态机，输入确定，输出一定确定。组件把状态与结果一一对应起来，组件中有state与prop（状态与属性）。

属性(props)是由父组件传递给子组件的；
状态(state)是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当状态发生转换时会触发不同的钩子函数（详见下文中生命周期），从而让开发者有机会做出相应。

props属性的用法

props是一个对象，是组建用来接收外面传来的参数，组件内部是不允许修改自己的props属性的，只能够通过父组件来修改。具体的使用方法如下

接收键值对数据

<HelloWorld name= ? />

字符串："XiaoFeng"
求值表达式 {123}、{"XiaoFeng"}
数组{[1,2,3]}
变量{variable}

函数求值表达式{function}（不推荐，如果需要函数可以单独把函数提取出来然后单独调用函数）

 var HelloWorld =React.createClass({
  render:function () {
       console.log(this.props)
      return <p>Hello,{this.props.name ? this.props.name : " World"}</p>;
  },
 });
 var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name:''
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return (<div>
        <HelloWorld name={this.state.name}></HelloWorld>
        <br/>
        <input type="text" onChange={this.handleChange} />
        </div>
        );
    }
 });
 ReactDOM.render(<HelloUniverse />,example);

setProps

已过时，即将废弃
propTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。
```
  var MyTitle = React.createClass({
    propTypes: {
      title: React.PropTypes.string.isRequired,
    },
    render: function() {
       return <h1> {this.props.title} </h1>;
     }
  });
```
上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。
```
  var data = 123;
  ReactDOM.render(
    <MyTitle title={data} />,
    document.body
  );
```
这样一来，title属性就通不过验证了。控制台会显示一行错误信息

getDefaultProps

getDefaultProps 方法可以用来设置组件属性的默认值

  var MyTitle = React.createClass({
    getDefaultProps : function () {
      return {
        title : 'Hello World'
      };
    },
  
    render: function() {
       return <h1> {this.props.title} </h1>;
     }
  });
  ReactDOM.render(<MyTitle />,document.body);

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点
```
  var NotesList = React.createClass({
    render: function() {
      return (
        <ol>
        {
          React.Children.map(this.props.children, function (child) {
            return <li>{child}</li>;
          })
        }
        </ol>
      );
    }
  });
  ReactDOM.render(
    <NotesList>
      <span>hello</span>
      <span>world</span>
    </NotesList>,example
  );
```
上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取。这里需要注意， this.props.children 的值有三种可能：
1. 如果当前组件没有子节点，它就是 undefined；
2. 如果有一个子节点，数据类型是 object；
3. 如果有多个子节点，数据类型就是 array
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

state属性的用法

React把组件当成状态机，一旦用户交互导致状态发生变化，就会触发重新渲染UI。this.state会随着用户的交互而发生变化。

工作原理

常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。
getInitialState

object getInitialState()

getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
setState

setState(object nextState[, function callback])

this.setState 方法用于修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

注意：
1. 绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。
2. setState()不会立刻改变 this.state，而是创建一个即将处理的state转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。
3. 不保证 setState()调用的同步性，为了提升性能，可能会批量执行state转变和DOM 渲染。
4. setState ( ) 将总是触发一次重绘，除非在 shouldComponentUpdate()中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在shouldComponentUpdate()中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState()可以避免不必要的重新渲染。
常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

组件的生命周期

生命周期各阶段

在整个ReactJS的声明周期中，主要会经历这四个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段。下面通过一段代码，来深入了解组件各个环节的运作流程

  var OneComponent = React.createClass({
    //1.创建阶段
    getDefaultProps: function() {
      //在创建类的时候被调用
      console.log('getDefaultProps');
      return {}
    },

    //2.实例化阶段
    getInitialState: function() {
      //获取this.state的默认值
      console.log('getInitialState');
      return {};
    },
    componentWillMount: function() {
      //在render之前调用此方法
      //业务逻辑的处理都应该放在这里，比如对state的操作等
      console.log('componentWillMount')
    },
    render: function() {
      //渲染并返回一个虚拟DOM
      console.log('render');
      return (
          <div> hello <b> {this.props.name} </b></div>
        )
    },
    componentDidMount: function() {
      //该方法发生在render方法之后
      //在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构
      console.log('componentDidMount');
    },

    //3.个更新阶段
    componentWillReceieveProps: function() {
      //该方法发生在this.props被修改或富组件调用setProps()方法之后
      console.log('componentWillRecieveProps');
    },
    shouldComponentUpdate: function() {
      //是否需要更新
      console.log('shouldComponentUpdate');
      return true;
    },
    componentWillUpadate: function() {
      //将要更新
      console.log('componentWillUpadate');
    },
    componentDidUpdate: function() {
      //更新完毕
      console.log('componentDidUpdate');
    },
    //4.销毁阶段
    componentWillUnmout: function() {
      //销毁时被调用
      console.log('componentWillUnmout');
    }
  })

  
  ReactDOM.render(
  <OneComponent  name="World "/>,
    document.getElementById('example')
  );

创建阶段：

该阶段主要发生在创建组件类的时候，即在调用React.createClass的时候。这个阶段只会触发一个getDefaultProps方法，该方法会返回一个对象，并缓存下来。然后与富组件制定的props对象合并，最后赋值给this.props作为该组件的默认属性。

实例化阶段

该阶段主要发生在实例化组件类的时候，也就是组件类被调用的时候。

  ReactDOM.render(
  <OneComponent  name="World "/>,
    document.getElementById('example')
  );

该组件被调用的时候，这个阶段会触发一系列的流程，具体的执行顺序如下所示。

getInitialState。初始化组件的state的值，其返回值会赋值给组件的this.state属性。
componentWillMount 在渲染（挂载）之前调用一次。

此时this.refs对象为空。如果在此时调用this.setState()则会更新this.state对象，而render只会调用一次。
render 根据state的值，生成页面需要的虚拟DOM结构，并返回该结构
componentDidMount 在渲染之后调用一次。根据虚拟DOM结构而生成的真实DOM进行相应的处理，组件内部可以通过this.getDOMNode()来获取当前组件的节点，然后就可以像在web开发中那样操作里面的DOM元素了。
```
  componentDidMount () {
    const textbox = React.findDOMNode(this.refs.text)
    if (this.props.autoFocus) textbox.focus()
  }
```

更新阶段

主要发生在用户操作或者组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。该阶段也会触发一系列的流程，具体的执行顺序如下所示。

componentWillReceiveProps 在将要接收props时调用。在该函数中，通常可以调用this.setState方法来完成对state的修改。

props是父组件传递给资组建的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。
```
  componentWillReceiveProps (nextProps) {
    if (this.props.disabled !== nextProps.disabled) {
  // disabled这个属性改变了
    }
  }
```
shouldComponentUpdate：该方法用来拦截新的props或state，然后根据事先设定好的判断逻辑，返回值决定组件是否需要update。

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
```
  shouldComponentUpdate (nextProps, nextState) {
      // 比较props或者states，返回true则更新照常，返回false则取消更新，且不会调用下面的两个生命周期函数
  }
```
componentWillUpdate ：组件更新之前调用一次。当上一部中shouldComponentUpdate方法返回true时候，就可以在该方法中做一些更新之前的操作。
render 根据一系列的diff算法，声称需要更心动额虚拟DOM数据。实际表明，在render中，最好只做数据和模板的结合，而不进行state等逻辑的修改，这样组件结构更清晰。
componentDidUpdate 组件的更新已经同步到DOM中后出发。

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

销毁阶段

componentWillUnmount 会在组件即将从挂载点移去时调用，用来取出去除即将被销毁的DOM节点的引用，或者是清除计时器，取消监听的时间等等。

注意：

绝对不要在componentWillUpdate和componentDidUpdate中调用this.setState方法，否则将导致无限循环调用。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

组件生命周期流程图

图片来自网络文章

组件之间的通信

先创建一个父类组件Parent，它内部调用一个叫做Child的子组件，并将接收到的外部参数name传递给子组件Child。

var Parent = React.createClass({
    handleClick: function() {
      this.refs.myTextInput.focus();
    },
    render: function() {
      return (
          <div onClick={this.handleClick}>
            <input type="text" ref="myTextInput" />
            Parent is:
              <Child name={this.props.name}></Child>
          </div>
        )
    }
});

在创建一个子类组件Child

  var Child = React.createClass({
    render: function() {
      return <span>{this.props.name}</span>
    }
  });

自后通过React.render方法将组件渲染到页面上

  ReactDOM.render(
    <Parent name="React" />,document.getElementById('example')
  );

运行结果

整个应用的功能是父组件接收传入的用户名称，并将用于名称传给子组件，最后再由子组件渲染显示到页面上。这些组件直接按是怎么通讯的呢？下面通过两方面介绍一下

子组件调用父组件的方法。从上面的例子可以看出，子组件要拿到父组件的属性，需要通过this.props方法。所以，如果子组件想要调用父组件的方法，只需要父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可通过"this.props.被调用的方法"这样的方式拿到name属性的。然后，每次父组件修改了传入的name属性，子组件便会得到通知，然后自动获取新的name属性
父组件调用子组件的方法。子组件调用父组件是通过prop属性，而反过来，父组件调用子组件通过的就是 ref 属性。子组件被设置了ref属性之后，父组件便可以通过this.ref.xxx来获取到子组件了，其中xx为子组件的ref值。

组件实践

1. 静态组件

var MyComponent=React.createClass({
  render: function() {
   return <h1 className="my-h1" style={{color:'red'}}>Hello world!</h1>;
 }
});
ReactDOM.render(
 <MyComponent />,
 document.getElementById('example')
);

运行结果

2. 动态组件

var Counter = React.createClass({
    incrementCount: function(){
        this.setState({
            count: this.state.count + 1
        });
    },
    getInitialState: function(){
        return {
            count: 0
        }
    },
    render: function(){
        return (
            <div className="my-component">
                <h1>Count: {this.state.count}</h1>
                <button type="button" onClick={this.incrementCount}>{this.props.name}</button>
            </div>
        );
    }
});

ReactDOM.render(
    <Counter name="递增按钮" />,
    document.getElementById('mount-point')
);

运行结果：

递增按钮

参考内容

最后编辑于：2017.12.03 07:55:05

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,029评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,395评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,570评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,535评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,650评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,850评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,006评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,747评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,207评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,536评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,683评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,342评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,964评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,772评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,004评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,401评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,566评论 2赞 349

Reactjs 踏坑指南2： JSX&&组件

JSX 知识准备

JSX环境准备

注意几点

JSX执行JavaScript表达式

JSX定义属性&&样式使用

JSX中的延展属性

JSX中的事件绑定

组件初步

以一个简单的Hello World开始

运行结果：

审查元素发现DOM结构如下：

组件的状态与属性

props属性的用法

state属性的用法

组件的生命周期

生命周期各阶段

创建阶段：

实例化阶段

更新阶段

销毁阶段

组件生命周期流程图

组件之间的通信

组件实践

1. 静态组件

2. 动态组件

参考内容

推荐阅读更多精彩内容