vue中的组件

作者: greenPLUS | 来源:发表于2018-09-19 20:18 被阅读0次

Vue.js的组件化思想 —上
vue 的坑
vue学习
vue中的slot插槽的用法
Vite按需引入自定义组件unplugin-vue-compon
Vue中多个元素或组件的过渡
vue父子组件传递数据方法
组件的局部注册
vue父子组件间调用方法
Vue/组件

组件可以扩展HTML元素，封装可重用的代码，组件分为全局和局部

全局：

Vue.component('my-component',{
        template:`
            <div>
            <h1>{{msg}}</h1>
                <ul>
                    <li>hello</li>
                    <li>nihao</li>
                </ul>
            <button v-on:click="alt">按钮</button>
            </div>
        `,
        data:function(){
            return{
                msg:'heilop'
            }
        },
        methods:{
            alt:function(){
                alert(11111)
            }
        }
    })

局部：

new Vue({
        el:'#itany',
        components:{
            'my-component':{
                template:`
                    <ul>
                        <li>sdsadjosap</li>
                        <li>dbsjakdhsajk</li>
                    </ul>
                `
            }
        }
    })

组件之间的传值

父传子用属性传 props：[ ]
子传父用事件传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="itany">
    <my-components></my-components>
</div>
<script src="dist/vue.js"></script>
<script>
    Vue.component("my-components",{
        template:`
            <div>
                <h1>我是父亲</h1>
                <my-child v-bind:age="arr"></my-child>
            </div>
        `,
        data:function(){
            return{
                arr:[1,2,3,5]
            }
        }
    }),
    Vue.component("my-child",{
        props:['age'],
        template:`
            <div>
                <ul>
                    <li v-for="val in age">{{val}}</li>
                </ul>
            </div>
        `
    })
    new Vue({
        el:'#itany',
    })
</script>
</body>
</html>