Vue初学-组件component

最新推荐文章于 2024-05-14 23:12:37 发布

不会写文章的猴子

最新推荐文章于 2024-05-14 23:12:37 发布

阅读量448

点赞数 2

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41809137/article/details/105889569

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <my-component></my-component>
    </div>
    <script>
        Vue.component("myComponent",{
            template:"<b>This is my component {{msg}}</b><h1>dsad<h2>",
            data () {
                return {
                    msg:"Hello World!"
                }
            }
        })
        const vue=new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

Vue.component用来定义全局组件，第一个参数是指定组件的名称。组件名称如果用驼峰命名法命名组件那么在调用组件的时候需要在驼峰之间加上一个小横杠因为html在遇到有大写的标签的时候都会将其转换成小写的形式。就如上图所示，组件名称时myComponent，调用组件的时候使用的是my-component。
template参数是用来指定组件的具体的内容的，可以是具体的一段HTML代码，也可以是一个组件的Id，但是组件里只能有个根节点，因为这个根节点表示的是页面的结构，如果有两个同时平行的根节点，那么第二个节点就不会起作用。
错误的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <my-component></my-component>
    </div>
    <template id="t1">
        <div>这是第一个节点</div>
        <div>这是第二个节点</div>
    </template>
    <script>
        Vue.component("myComponent",{
            template:"#t1"
        })
        const vue=new Vue({
            el:"#app",
        })
    </script>
</body>
</html>

显示结果：
在这里插入图片描述

data 是用来定义该组件的数据，需要注意的是这里的data不再是Vue对象中的一个data对象，而是一个函数，不过他的返回值必须是一个对象。

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <component1></component1>
      <component2></component1>
    </div>
    <template id="t1">
        <div>
            {{msg}}
        </div>
    </template>
    <template id="t2">
        <div>
            {{msg}}
        </div>
    </template>
    <script>
        const vue=new Vue({
            el:"#app",
            components: {
                "component1":{
                    template:"#t1",
                    data () {
                        return {
                            msg:"Hello World T1"
                        }
                    }
                },
                "component2":{
                    template:"#t2",
                    data () {
                        return {
                            msg:"Hello World T2"
                        }
                    }
                },
            }
        })
    </script>
</body>
</html>

定义的局部组件只能写到vue对象的components属性中， 其他的与全局组件类似。

父组件获取子组件的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <mycomponent msg="Hello world" ref="t1"></mycomponent>
    </div>
    <template id="childcomponent">
        <div>
            我是子组件{{msg}} {{number}}
        </div>
    </template>
    <script>
        Vue.component("mycomponent",{
            template:"#childcomponent",
            data(){
                return {
                    msg:"Hello world",
                    number:10
                }
            }
        })
        const vue=new Vue({
            el:"#app",
            data:{
                number:1
            },
            mounted () {
                var {msg,number}=this.$refs.t1;
                console.log(msg);
                console.log(number);
            }
        })
    </script>
</body>
</html>

使用ref对组件进行注册引用信息， 在父组件中通过this.$refs.[refname] 的即可获取对应的组件实例。另外ref也可以在任何标签上注册引用信息。得到对应的dom元素。
同时也可以拿到子组件对应的数据：
在这里插入图片描述
另外我们也可以通过 this.$children 拿到父组件对应的所有的子组件的对象，得到的是一个数组对象，然后通过索引的方式得到对应的子组件对象。

子组件获取父组件的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <mycomponent msg="Hello world" :mynumber=number ></mycomponent>
    </div>
    <template id="childcomponent">
        <div>
            我是子组件{{msg}} {{mynumber}}
        </div>
    </template>
    <script>
        Vue.component("mycomponent",{
            template:"#childcomponent",
            props: ["msg","mynumber",]
        })
        const vue=new Vue({
            el:"#app",
            data:{
                number:1
            }
        })
    </script>
</body>
</html>

子组件通过在props中定义对应的属性来获取从外部传过来的值，可以是固定的数据，也可以是从父组件传过来的数据。
props属性中的对象还可以通过type属性来约束对应数据的类型，以及default属性来为该数据赋初值。

   props:{
                msg:{
                    type:"String",
                    default:"123"
                },
                mynumber:{
                    type:"Number",
                    default:0
                }
            }

兄弟组件间的传值

通过空的vue对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <component1></component1>
      <component2></component2>
    </div>
    <template id="t1">
        <div>
            我是子组件1
            <button @click="sendMsg">传值</button>
        </div>
    </template>
    <template id="t2">
        <div>
            我是子组件2
        </div>
    </template>
    <script>
        var vm=new Vue();
        Vue.component("component1",{
            template:"#t1",
            data(){
                return{
                    msg:"我是组件1的参数"
                }
            },
            methods: {
                sendMsg:function(){
                    vm.$emit("sendMethod", this.msg,"AAA");
                }
            }
        })
        Vue.component("component2",{
            template:"#t2",
            mounted(){
                vm.$on("sendMethod",function(...data){
                    alert(data);
                })
            }
        })
        const vue=new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

在第一个组件中使用$emit()方法发送数据，然后在第二个平级的组件中使用$on()去接收对应的数据。
通过中间对象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <component1></component1>
      <component2></component2>
    </div>
    <template id="t1">
        <div>
            我是子组件1
            <button @click="sendMsg">传值</button>
        </div>
    </template>
    <template id="t2">
        <div>
            我是子组件2
            <button @click="recevieMsg">接收值</button>
        </div>
    </template>
    <script>
        var temp={
            val:"",
            set val(value){
                val=value+"AAA";
            },
            get val(){
                return val;
            }
        }
        Vue.component("component1",{
            template:"#t1",
            data(){
                return{
                    msg:"我是组件1的参数"
                }
            },
            methods: {
                sendMsg:function(){
                   temp.val=this.msg;
                }
            }
        })
        Vue.component("component2",{
            template:"#t2",
            data(){
                return{
                    t2msg:""
                }
            },
            methods:{
                recevieMsg(){
                    this.t2msg=temp.val;
                    alert(this.t2msg);
                }
            }
        })
        const vue=new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

同时我们也可以使用vuex去在各个同级组件之间互相传值。
使同级组件有共同的父组件：
当同级组件有相同的父组件时，我们可以使用$parent获取父组件，然后使用父组件的$children获取它的所有的子组件，然后我们可以通过索引的方式取到每一个子组件的实例。

子组件触发父组件中定义的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
      <mycomponent @parentmethod="clickMe" ></mycomponent>
    </div>
    <template id="childcomponent">
        <div>
            我是子组件
        </div>
    </template>
    <script>
        Vue.component("mycomponent",{
            template:"#childcomponent",
            mounted () {
                this.$emit("parentmethod","arg1","arg2")
            }
        })
        const vue=new Vue({
            el:"#app",
            methods: {
                clickMe(...params){
                    alert(params);
                }
            }
        })
    </script>
</body>
</html>

this.$emit(methodName,data) 可以在触发子组件中的某些事件的时候，同时触发父组件中的方法。