Vue组件详解

目录

全局组件：

定义局部组件

方式一：

方式二:

在组件里定义属性(props)：

添加事件/方法：

事件的传递：

---

组件可以说是vue最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。

全局组件：

首先注册一个全局组件的语法格式如下：

Vue.component(tagName,options);

参数1：(tagName)组件名称----自定义

             通过：<tagName></tagName>来调用

参数2：(options)组件配置对象

              通过{template:'标签'}来配置，template用来书写html代码，且必须有且只有一个容器，否认则会报错

例子：

定义组件要在Vue实例之外，而且必须有一个作用域（不用调用，默认配置），如果有多个作用域会全部配置

<div id="app">
    <login></login>
</div>
<script src="js/vue.js"></script>
<script>
     Vue.component('login',{
         template:"<div><h1>用户登录</h1></div>",
     });
     const app = new Vue({                
         el: "#app",
         data: {},
});

定义局部组件

方式一：

首先要定义一个组件：

然后在实例的作用域中进行组件挂载

组件挂载需要用到components，

        挂载有两个参数，第一个参数是我要在html中写的组件名，第二个是我要挂载的组件名

        ps:如果两个参数名相同可以简写成一个，也是可以的

<div id="app">
    <login1></login1>
</div>
=================
let login = {
    template: "<h1>我是局部组件</h1>",
}
const app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    components:{
        //挂载组件
        login1:login
    },
});

方式二:

在html中写一个template标签并给其一个id，通过给定义组件的template赋予id，就可以获取了，毕竟我们不可能在js里写一大堆html代码，我们还是希望在html写html，在js里写js

<div id="app">
            <login1></login1>
        </div>
        <!-- 定义局部组件 -->
        <!-- 需要定义一个id -->
        <template id="loginT">
            <div>
                <h1>我是template里的局部组件</h1>
            </div>
        </template>
    <script src="js/vue.js"></script>
<script>
    let login = {
    template: "#loginT",//id名写里面
}
const app = new Vue({
    el:"#app",
    data:{},
    methods:{},
    components:{
        //挂载组件
        login1:login
    },
});
</script>

在组件里定义属性(props)：

在定义组件里是不能直接获取实例里的数据的，获取数据方式：

<div id="app">
    <!-- //属性绑定 -->
    <login1 :username="username" :age="age"></login1>
    <login1></login1>
</div>
    <!-- 定义局部组件 -->
    <!-- 需要定义一个id -->
    <template id="loginT">
        <div>
            <h1>{{name}},{{ag}}</h1>
            <h1>{{username}},{{age}}</h1>
        </div>
    </template>
<script src="js/vue.js"></script>
<script>
    let login = {
    template: "#loginT",//id名写里面
    //把数据挂载过来
    data(){
        return{
            name:"xiaoqiang",
            ag:23,
        }
    },
    props:["username","age"],//只能用于属性的定义

}
const app = new Vue({
    el:"#app",
    data:{
        username:"zhangsan",
        age:12,
    },
    methods:{},
    components:{
        //挂载组件
        login1:login
    },
});
</script>

非常难以理解：（理解不上去可以不理解，我也不是很明白，如果有写错的，请诸位教正）

一定要参照代码来理解:

前提：props用于定义属性，你要理解，属性定义的只是属性，

在template里你想获取作用域里的属性：

        {{属性名}}，一定要和props里的属性名相同，且在html里自定义的组件里进行属性绑定，:属性="作用域里的属性名",

要想通过定义组件获取内容，需要先把属性挂载回来通过data(){return{}},里面可以定义属性，但千万切记，属性名不可以和props定义的属性一样，html里不需要进行属性绑定.如果名字相同，就会去找作用域里的属性，没有就会报错，没有属性绑定也会报错

添加事件/方法：

既然属性可以挂载回来，那么事件也可以挂载回来methods:{},里面就是正常的事件书写方式

<div id="app">
            <login :username="username" @aaa="findAll"></login>
        </div>

        <!-- 定义局部组件 -->
        <template id="loginTemplate">
            <div>
                <h1>用户登录：{{username}}</h1>
                <ul>
                    <li v-for="(item,index) in lists">
                        {{index}} --- {{item}}
                    </li>
                </ul>
                <button @click="change">触发组件中的事件</button>
            </div>
        </template>

        <script src="js/vue.js"></script>
        <script>
            // 定义一个局部组件
            let login = {
                template: "#loginTemplate",
                data() {
                    return {
                        name:"xiaoqiang",
                        lists:['java','c++','python']
                    }
                },
                props:['username'],
                methods: {
                    change() {
                        alert(this.name);//获取组件的姓名
                        alert(this.username);//获取作用域里的姓名
                        this.$emit('aaa');
                    }
                },
            }

            const app = new Vue({
                
                el: "#app",
                data: {
                    username:"zhangsan",
                    age:23
                },
                methods: {
                    findAll() {
                        alert("Vue实例中定义的函数");
                    }
                },
                components:{
                    login
                }
            });

        </script>

事件的传递：

调用的函数（findAll）是写在html里的，所以调用的函数是要写在实例的methods中，那我要想点击组件里的按钮调用我在html里写的事件该怎么做：this.$emit('aaa');-------按照上面代码写的,html里：@aaa="findAll";