vue的插槽和强制刷新

264 阅读1分钟

插槽

就是在父组件内添加内容,渲染到子组件内, 使用插槽可以渲染,不使用的话,不会显示

  <div id="div1">
        <div>
          <child-a>
              <!-- 具名插槽 -->
              <h1 slot="s1">标题</h1>
              <button slot="s2">取消</button>
              <!-- 匿名插槽 -->
              <h2>。。。。</h2>
          </child-a>
        </div>
    </div>
    <template id="childA">
        <div>
            <slot name="s1"><slot>
            <h1>内容</h1>
            <slot></slot>
            <slot name="s2"><slot>
        </div>
    </template>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#div1",
            components:{
                ChildA:{
                    template:"#childA"
                }
            }
        })
    </script>

暴力刷新,值和视图都刷新

$forceUpdate();

image.png