zoukankan      html  css  js  c++  java
  • [Vue] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

    Two children components:

    <!-- show.vue -->
    
    <template>
        <div>
            Show Component: <span>{{name}}</span>
        </div>
    </template>
    <script>
        export default{
            name: 'show-component',
            props: ['name']
        }
    </script>
    <!-- edit-->
    <template>
        <div>
            Edit component: <input type="text" v-model="editValue"/>
        </div>
    </template>
    <script>
        export default{
            name: 'edit-component',
            data(){
                return{
                    editValue: this.name
                }
            },
            props: ['name']
        }
    </script>

    Parent:

    <template>
    
        <section class="container">
            <section>
                <h3>Dynamic component</h3>
                <a @click="toggle">{{toggleButton}}</a>
                <keep-alive>
                    <component
                            v-bind:is="currentView"
                            v-bind:name="message"
                    >
                    </component>
                </keep-alive>
    
            </section>
        </section>
    </template>
    
    <style scoped>
    .title
    {
      margin: 50px 0;
    }
    
    </style>
    
    <script>
      import ShowComponent from '../components/show';
      import EditComponent from '../components/edit';
    
      export default {
        data() {
          return {
            message: 'this is my vue!',
            currentView: "ShowComponent"
          }
        },
    
          computed: {
            toggleButton: function() {
                return this.currentView === "ShowComponent" ?
                    'show': 'Edit';
            }
          },
        components: {
            EditComponent,
            ShowComponent
        },
        methods: {
          toggle() {
            this.currentView =
                this.currentView === "ShowComponent" ?
                "EditComponent" : "ShowComponent";
          }
        }
      }
    
    </script>
  • 相关阅读:
    力扣3. 无重复字符的最长子串
    力扣724. 寻找数组的中心索引
    力扣105. 从前序与中序遍历序列构造二叉树
    力扣541. 反转字符串 II
    力扣496. 下一个更大元素 I
    力扣129. 求根到叶子节点数字之和
    力扣628. 三个数的最大乘积
    力扣415. 字符串相加
    力扣409. 最长回文串
    力扣404. 左叶子之和
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6347476.html
Copyright © 2011-2022 走看看