How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)-JS Tutorial-php.cn

How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial)

亚连

Release： 2018-06-02 09:18:32

Original

2523 people have browsed it

This article mainly introduces vue slot to display the template passed by the parent component in the child component. Friends who need it can refer to it

The parent component does not specify the slot attribute, and the default is default

You can use the default value in the slot. If the parent component does not pass the corresponding slot, the default value will be displayed.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <p id="app">
    <modal>
      <!-- 调用父组件的方法 -->
      <h1 @click=&#39;click&#39;>aaa</h1></modal>
    <modal>
      <h2>bbb</h2></modal>
    <modal>
      <!-- 使用slot设置模板中的名字,会插入到指定的slot中 -->
      <p slot=&#39;title&#39;>hello</p>
      <p slot=&#39;content&#39;>
        world
      </p>
    </modal>
    <modal></modal>
  </p>
  <template id="modal">
    <!-- 使用slot在子组件中显示父组件传过来的模板 -->
      <p>
        modal
        <slot name=&#39;default&#39;>如果没有会使用这个默认值</slot>
      <h1>
        title:
        <slot name=&#39;title&#39;>
        </slot>
      </h1>
      content:
      <slot name=&#39;content&#39;></slot>
      </p>
    </template>
  <script type="text/javascript">
    let modal = {
      template: &#39;#modal&#39;
    }
    new Vue({
      el: &#39;#app&#39;,
      components: {
        // es 简写 ，只写一个的意思为
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log(&#39;aaa&#39;)
        }
      }
    })
  </script>
</body>
</html>

Copy after login

The above is what I compiled for everyone. I hope it will be used in the future. Helpful to everyone.

How to implement value-passing and URL encoding conversion in JS forms?

How to use jQuery to implement the toggle method of sliding left and right?

How to implement the scroll method on the mobile side in vue?

The above is the detailed content of How to implement slot in vue to display the template passed by the parent component in the child component (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!