2020-12-18 Vue入门学习2

最新推荐文章于 2025-12-31 14:00:00 发布

原创最新推荐文章于 2025-12-31 14:00:00 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html #js

前端专栏收录该内容

7 篇文章

订阅专栏

博客主要介绍了Vue中的组件，包括组件是可复用的Vue实例，可在根实例中作为自定义元素。阐述了全局和局部组件，还说明了组件可通过Prop向子组件传递数据，也能用data属性定义和传递数据，此外还能自定义事件并调用Vue中定义的事件方法。

Vue中的组件

定义：组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素。

全局组件：

 <div id="app">
        <user-login></user-login>
    </div>
    <script>
        //全局组件的定义
        Vue.component("userLogin",{
           template: '<div><h2>哈哈哈</h2></div>'
        });

        var app = new Vue({
            el: "#app",
            data:{

            },methods: {

            }
        })
    </script>

局部组件：

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

    <!--模板标签-->
    <template id="login">
        <h2>哈哈哈</h2>
    </template>
    <script>
        //局部组件
        let login = {
           template: "#login"
        };

        var app = new Vue({
            el: "#app",
            data:{

            },methods: {

            },components:{
                login //组件名和局部组件变量名一样的话，可以省略组件名称
            }
        })
    </script>

组件可以通过 Prop 向子组件传递数据
如：Vue的data中的值可以通过v-bind绑定给组件的一个自定义属性中，在props中可以定义一个属性用于接收data的值，这样，组件中就可以使用了。

  <div id="app">
        <login :name="name"></login> <!--通过v-bind:name的方式将vuedata中的name数据绑定给name属性-->
    </div>
    <!--模板标签-->
    <template id="login">
        <h2>哈哈哈:{{name}}</h2>
    </template>
    <script>
        //局部组件
        let login = {
            template: "#login",
            props:['name'],

        };

        var app = new Vue({
            el: "#app",
            data:{
                name: "小明"
            },methods: {

            },components:{
                login //组件名和局部组件变量名一样的话，可以省略组件名称
            }
        })
    </script>

组件中也可以使用data属性来定义和传递数据
只不过定义的方式和Vue对象中有点不同：data(){ return:{name:xxx} }

<script>
        let com = {
            template:"#temp1",
            data(){  //data属性的定义要使用data(){}的形式
                return{
                    name:"小明"
                }
            }
        };

        const app = new Vue({
            el:"#app",
            components:{
                com
            }
        })
    </script>

还可以自定义事件
定义方式和vue对象中的方式一致

<script>
        let com = {
            template:"#temp1",
            data(){  //data属性的定义要使用data(){}的形式
                return{
                    name:"小明"
                }
            },methods:{
                onClickChange(){
                    alert(this.name);
                }
            }
        };

        const app = new Vue({
            el:"#app",
            components:{
                com
            }
        })
    </script>

在组件中调用vue中定义的事件方法
可以通过v-on给vue绑定一个事件，自定义事件名称，然后在组件方法中通过this.$emit("")的方式来调用vue中的方法

 <div id="app">
        <com @haha="haha"></com>
    </div>
    <template id="temp1">
        <button @click="onClickChange">点击触发事件</button>
    </template>
    <script>
        let com = {
            template:"#temp1",
            data(){  //data属性的定义要使用data(){}的形式
                return{
                    name:"小明"
                }
            },methods:{
                onClickChange(){
                   //向在这里调用Vue中的事件方法
                    this.$emit('haha');
                }
            }
        };

        const app = new Vue({
            el:"#app",
            components:{
                com
            },methods: {
                haha(){
                    alert("haha,vue中的事件");
                }
            }
        })
    </script>