vue官方实例-组件

时间 2019-11-30
标签 vue 官方实例组件繁體版
原文原文链接
vue组件实例：javascript
组件注册：
// 组件命名推荐字母全小写且必须包含一个连字符
// 定义组件名的方式有两种：短横线分隔命名，引用时也使用短横线方式；首字母大写命名，
// 引用时能够短横线形式引用也可首字母大写形式引用。


// 组件注册-全局注册&局部注册
// 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官网 & 各路大神html