javascript - Vue 中的 componentWillReceiveProps

Question

我是 Vue 的新手，来自 React-y 郊区。我正在从后者重建我的 SideNav(“抽屉”)组件。在那里，当点击按钮(与导航本身无关)时，它setStateed this.state.toggle被绑定(bind)适当的

class thePage extends React.Component {
...
    this.handleToggleClick = this.handleToggleClick.bind(this);
    this.state ={
      toggleState: false
    };
  }

// Slide out buttons event handlers
  handleToggleClick(){
    this.setState({
      toggleState: !this.state.toggleState
    })
  }

render() {

const button = <a href="#" onClick={this.handleToggleClick}>here</a>

const isOpenWithButton = this.state.toggleState;


return (
 <div>
  {button}
  <SideNav logo="logo.png" isOpenWithButton={isOpenWithButton}>
  . . .
  </SideNav>
 </div>
);
}

}

    export default SideNavPage;

SideNav 如下所示:

class SideNav extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      isThere: false,
      showOverlay: false,

    }
    this.handleOverlayClick = this.handleOverlayClick.bind(this);
  }

  componentWillReceiveProps(NextProps) {
    if (this.props.isOpenWithButton !== NextProps.isOpenWithButton) {
      this.setState({
        isThere: true,
        showOverlay: true
      })
    }
  }

  handleOverlayClick(){
    this.setState({
      isThere: false,
      showOverlay: false
    });
  }

  render() {
    const {
      tag: Tag,
   ...
      isOpenWithButton,
    } = this.props;

    let isThere = this.state.isThere;
    let showOverlay = this.state.showOverlay;
    const overlay = <div class="overlay" onClick={this.handleOverlayClick}></div>


    const sidenav = (
      <Tag>
        <ul>
          {logo &&
            <li>
              <div className="logo-wrapper">
                <a href={href}>
                  <img src={logo} className="img-fluid flex-center d-block"/>
                </a>
              </div>
            </li>
          }
          {children}
        </ul>
      </Tag>
    );


    return (
      <div>
        {isThere && sidenav}
        {showOverlay && overlay}
      </div>
    );
  }
}

export default SideNav;

因此，如您所见，单击按钮会导致 isOpenWithButton Prop 发生变化，并且每当它发生时 (componentWillReceiveProps)，带有覆盖的 sidenav 就会出现。

我做了一些将它移植到 Vue 的工作，但由于它缺少这个生命周期钩子(Hook)，我只能使用 props。我有以下问题:单击按钮会打开叠加层，但是当您通过单击叠加层关闭它时，按钮发送的 bool 属性不会改变，如果 sidenav 已经打开，则需要单击按钮两次。我知道我一定遗漏了 Vue 逻辑中的一个重要部分，但我无法理解是哪一个。

Answer 1

使用.sync修饰符

你要找的在vue中叫一个.sync修饰符。

When a child component mutates a prop that has .sync, the value change will be reflected in the parent.

有了这个你就可以实现你所描述的:

clicking the button opens the overlay, but as you close it with clicking in the overlay, the Boolean prop sent by button does not change

使用集中式存储——(如 vuex)

如果您有一个集中式状态/存储，也可以实现同样的效果，在这种情况下，您的两个组件都可以依赖于该状态属性。

参见 state management关于 Vue 文档:

Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them

您可以简单地切换相同的属性，例如:

$store.commit('overlayToggle');