Vue.js组件创建与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42689147/article/details/88895405

本文介绍了Vue.js中创建组件的三种方式，并详细讲解了如何通过props进行父组件向子组件的数据传递，以及如何在Vue中实现组件间的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建组件的方式

第一种：使用Vue.extend来创建全局的vue组件

例1：

如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中去即可。注意：如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在应用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 连接；如果不使用驼峰，则直接拿名称来使用即可。上例中的'myCom1'是驼峰命名，使用时应如下：

例2：

调用时：

例3（简写方式）：

第二种：

注意：无论是哪种方式创建出来的组件，组建的template属性指向的模板内容，必须有且只能有唯一的一个根元素

第三种：

<body>
    <div id="app">
        <mycom3></mycom3>
    </div>

    <div id="app2">
        <mycom3></mycom3>
        <login></login>
    </div>
    <!-- 再被控制的#app外面，使用template元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮 -->
    <template id="temp1">
        <div>
            <h1>这是通过template元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
            <h4>好用，不错！</h4>
        </div>
    </template>
    <template id="temp2">
        <div>
            <h1>这是私有组件login</h1>
        </div>
    </template>
    <script>
        Vue.component('mycom3', {
            template: '#temp1',
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
        var vm2 = new Vue({
            el: '#app2',
            data: {},
            methods: {},
        })
    </script>

组件中的data和methods

1、组件可以有自己的data数据

2、组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是，组件中的data必须是一个方法

3、组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行

4、组件中的data数据，使用方式和实例中的data使用方式完全一样

组件的切换

第一种：组件的切换方式一主要思想使用v-if 和 v-else

第二种，组件的切换方式二相对于第一种，比较通用，主要思想：使用vue提供的component标签

第三种，含有动画的组件切换，主要思想，使用这个属性，设置组件的切换模式，有out-in,也有in-out

<style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
<body>
    <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- vue提供了component，来展示对应名称的组件 -->
        <!-- component是一个占位符， :is属性，可以用来指定要展示的组件的名称 -->

        <!-- 通过mode属性，设置组件切换时候的模式 -->
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
    </div>
    <script>
        //组件名称是 字符串
        Vue.component('login', {
                template: '<h3>登录组件</h3>'
            }),
            Vue.component('register', {
                template: '<h3>注册组件</h3>'
            })
        var vm = new Vue({
            el: '#app',
            data: {
                comName: 'login', 
            },
            methods: {

            },
        })
    </script>
</body>

父组件向子组件传值

主要思想：主要是通过组件props,结合使用v-bind:属性绑定，具体请结合以下实例

<!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>父组件向子组件传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind） 的形式，吧需要传递给子组件的数据，以属性绑定的形式传递到子组件内部，供子组件使用-->
        <com1 v-bind:parentmsg="msg"></com1>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '123 父组件中的数据'
            },
            components: {
         //结论：经过演示发现，子组件中，默认无法访问到父组件中的data上的数据和methods中的方法
                com1: {
    //注意：子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件 
   //通过AJAX，请求回来的数据，都可以放到data身上
                    // data上的数据，都是可读可写的
                    data() {
                        return {
                            title: '123',
                            content: '111'
                        }
                    },
                    template: '<h1 @click="change">这是子组件----{{parentmsg}}</h1>',
                    // 注意：组件中的所有props中的数据，都是用过父组件传给子组件的
                    // props中的数据都是只读的，无法重新赋值
                    props: ['parentmsg'], //把父组件传递过来的parentmsg属性，先在props数组 
   //中，定义一下，这样，才能使用这个数据
                    methods: {
                        change() {
                            this.parentmsg = "被修改了"
                        }
                    }
                }
            },
        })
    </script>
</body>
</html>

父组件向子组件传递方法

大家可以耐心的看一下下面的代码段，领悟一下

获取DOM元素和组件

主要使用ref，具体实例如下：

<!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>获取DOM元素和组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="获取元素" @click="getElement" ref="btn">
        <h3 id="myh3" ref="myh3">哈哈哈，今天天气很好！</h3>
        <hr>
        <login ref="mylogin"></login>
    </div>
    <script>
        var login = {
            template: '<h1>登录组件</h1>',
            data() {
                return {
                    msg: 'son msg'
                }
            },
            methods: {
                show() {
                    console.log('调用了子组件的方法')
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getElement() {
                    // console.log(document.getElementById('myh3').innerText)

                    // ref 是英文单词 [reference] 引用的意思 值类型和引用类型
                    // console.log(this.$refs.myh3.innerText)

                    console.log(this.$refs.mylogin.msg)
                    this.$refs.mylogin.show()
                }
            },
            components: {
                login
            }
        })
    </script>
</body>

</html>