vue官方实例-组件

作者：IT小白 | 2024-07-10 20:00:20
踩
vue官方组件
vue组件实例：

组件注册：
// 组件命名推荐字母全小写且必须包含一个连字符
// 定义组件名的方式有两种：短横线分隔命名，引用时也使用短横线方式；首字母大写命名，
// 引用时可以短横线形式引用也可首字母大写形式引用。
 
 
// 组件注册-全局注册&局部注册
// Vue.component('component-name',{...})
/* 
var ComponentA = {}
new Vue({
    el:'#app',
    components: {
        'component-a':ComponentA
    }
})
 */
 
 
ps：局部注册的组件在其子组件内不可用，若希望ComponentA在ComponentB中可用，则：
/* 
var ComponentA = {...}
var ComponentB = {
    components: {
        'component-a':ComponentA
    },
    // ...
} 
*/
 
 
/* 
import ComponentA from './ComponentA.vue';
export default {
    components: {
        ComponentA
    },
    // ...
}
 */
 
 ComponentA等价于ComponentA：ComponentA
 左边表示用在模板中的自定义元素的名称；右边表示包含了这个组件选项的变量名
 
 
实例1：
ps：一个组件可以在不同地方多次调用，注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
 
 
<body>
    <div id="components-demo1">
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
</body>
 
 
<script>
    Vue.component('button-counter',{
        data:function(){
            return {
                count:0
            }
        },
        template:`<button v-on:click="count++">cliced {{count}} times</button>`
    })
    new Vue({
        el:'#components-demo1'
    })
</script>
 
 
ps：定义组件时，其data应该返回一个函数，这样组件多次被调用时每个实例可以维护一份被返回对象的独立的拷贝。如果data直接返回对象的话，多次调用同一个组件时，点击一个其他几个会有共同的反应。
 
 
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop
 
实例2：prop，一个 prop 被注册之后，把数据作为一个自定义特性传递进来：
    <blog-post title="My journey with Vue"></blog-post>
    <blog-post title="Blogging with Vue"></blog-post>
 
 
 Vue.component('blog-post', {
        props:['title'],
        template:`<h3>{{title}}</h3>`
 })
 
 
实例3：使用 v-bind 来动态传递 prop
   <blog-post
            v-for="post in posts"
            v-bind:key="post.id"
            v-bind:title="post.title"
   ></blog-post>
 
 
Vue.component('blog-post', {
        props:['title'],
        template:`<h3>{{title}}</h3>`
})
 new Vue({
        el:'#components-demo1',
        data:{
            posts:[
                {id:1,title:'sddd'},
                {id:2,title:'fdadsds'},
                {id:3,title:'dsddd'}
            ]
        }
 })
 
 
ps：每个组件必须只有一个根元素。
 
多个属性要传给组件时，若仍使用v-bind一个一个属性的传递会很繁琐，可以选择直接整个对象传过去，
 
实例4：prop 传递对象
   <blog-post-new
            v-for="post in posts"
            v-bind:key='post.id'
            v-bind:post='post'
   ></blog-post-new>
 
 
 Vue.component('blog-post-new',{
        props:['post'],
        template:`
            <div class="blog-post-new">
                <h3>{{post.title}}</h3>
                <div v-html="post.content"></div>
            </div>
        `
    })
    new Vue({
        el:'#components-demo1',
        data:{
            posts:[
                {id:1,title:'sddd'},
                {id:2,title:'fdadsds'},
                {id:3,title:'dsddd'}
            ]
        }
    })
 
 
实例5：通过slot插槽分发内容
 <alert-box>
     something good happened.
 </alert-box>
 
 
    Vue.component('alert-box', {
        template:`
            <div>
                <strong>oH yeah </strong>
                <slot></slot>
            </div>
        `
    })
 
 
实例6：动态切换组件 
通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue"></script>
    <style>
        .tab-button {
            padding: 6px 10px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 1px solid #ccc;
            cursor: pointer;
            background: #f0f0f0;
            margin-bottom: -1px;
            margin-right: -1px;
        }
 
        .tab-button:hover {
            background: #e0e0e0;
        }
 
        .tab-button.active {
            background: #e0e0e0;
        }
 
        .tab {
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div id="dynamic-component-demo" class="demo">
        <button
            v-for="tab in tabs"
            v-bind:key='tab'
            v-bind:class="['tab-button',{active:currentTab === tab }]"
            v-on:click="currentTab=tab"
        >{{ tab }}</button>
        <!-- 在一个多标签的界面中使用 is 特性来切换不同的组件 -->
        <!-- 我们更希望那些标签的组件实例能够被在它们第一次被创建
            的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 -->
        <keep-alive>
            <component
                v-bind:is="currentTabComponent"
                class="tab"
            ></component>
        </keep-alive>
    </div>
    <script>
        Vue.component('tab-home', {
            template:'<div>Home component</div>'
        })
        Vue.component('tab-posts', {
            template:`<div>Posts component</div>`
        })
        Vue.component('tab-archive', {
            template:`<div>Archive component</div>`
        })
        new Vue({
            el: '#dynamic-component-demo',
            data: {
                currentTab: 'Home',
                tabs: ['Home', 'Posts', 'Archive']
            },
            computed: {
                currentTabComponent:function(){
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        })
    </script>
</body>
 
</html>
参考 & 感谢：vue官网 & 各路大神
转载于:https://www.cnblogs.com/haimengqingyuan/p/11426585.html
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/807472