Vue 组件

最新推荐文章于 2025-03-09 10:09:01 发布

津门老九

最新推荐文章于 2025-03-09 10:09:01 发布

阅读量122

点赞数

分类专栏： Vue 知识积累

本文链接：https://blog.youkuaiyun.com/u010723080/article/details/107030569

版权

Vue 知识积累专栏收录该内容

3 篇文章

订阅专栏

基本使用：

全局组件

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <component></component>
    </div>

    <script>
        Vue.component('component', {template: '<div>组件</div>')

        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

局部组件

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <component></component>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            components: {
                'component': {
                    template: '<div>组件</div>'
                }
            }
        })
    </script>
</body>

全局组件在所有 Vue 实例中使用，局部组件只能在当前 Vue 实例中使用。创建局部组件和全局组件的形式类似，定义组件名称，创建组件模板，使用时以组件名称作为标签在 HTML 代码中使用。组件模板只能有一个根节点。组件实质是一个 Vue 实例，只是 data 属性值是一个函数，函数返回对象。

Vue.component('component', {
    template: '<div>组件{{msg}}</div>',
    data: function () {
        return {
            msg: '数据'
        }
    }
})

组件通讯：

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <child :msg="pmsg"></child>
    </div>

    <script>
        Vue.component('child', {
            template: '<div>{{msg}}</div>',
            props: ['msg']
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件数据'
            }
        })
    </script>
</body>

创建 child 组件，在 id 为 app 的标签中使用，这样 vm 相当于 child 组件的父组件。在 vm 创建数据 pmsg，如果在 child 组件中使用父组件的 pmsg 需要在 child 组件中使用 props 声明一个 msg 属性，在 child 表中是将 pmsg 赋值给 msg。

<body>
    <script src="./vue.js"></script>

    <div id="app">
        <child @transpont="fun"></child>
    </div>

    <script>
        Vue.component('child', {
            template: '<div>组件</div>',
            data: function () {
                return {
                    cmsg: '子组件数据'
                }
            },
            created() {
                this.$emit('transpont', this.cmsg)
            }
        })
        
        var vm = new Vue({
            el: '#app',
            methods: {
                fun(msg) {
                    console.log(msg)
                }
            }
        })
    </script>
</body>

创建 child 组件，在 id 为 app 的标签中使用，这样 vm 相当于 child 组件的父组件。在 child 组件中创建 cmsg，在 child 标签中定义 transpont 事件，当执行该事件是调用 vm 中的 fun 方法。在 child 组件的 created 生命周期方法中使用 $emit 方法执行 transpont 事件，同时将 cmsg 作为 fun 方法的参数。