MENU

Vue组件传值

• May 31, 2019 • Read: 2229 • Web Program

组件

全局组件

在任何实例里面都能使用的就叫全局组件。

注册一个全局组件

<body>
       <template id="memeda">
                <div>
                        <h1>{{ test }}</h1>
                        <button @click="test()">按钮</button>
                </div>
    </template> 
</body>

Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定义template标签 通过#memeda选择器获取 必须放在一个根节点里面
data:function(){//或者data(){}
    return {
       test:"测试组件" 
    }
},
methods:{
    function test(){
        console.log(111);
    }
}
})

//调用
<my-test></my-test>
this.$set.(this.arr,index,value)//解决修改组件内部引用类型（数组，对象）之后 页面渲染不同步问题

封装底部导航demo

<!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>Document</title>
    <script src="https://cdn.xiaohuwei.cn/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
    a:hover{
        text-decoration: none;
        transform:scale(1.1);
        color:red;
    }
    a{
        text-decoration: none;
        font-size:20px;
        transition: .3s;
    }
    a:focus{
        text-decoration: none;
    }
*{
    padding:0;
}
    </style>
</head>
<body>
    <div id="box">
        <navbar></navbar>
    </div>
    <template id="navbar">
        <div class="container-fluid text-center bg-info" style="height: 50px; line-height: 60px;position: fixed;bottom: 2px;width: 100%;">
            <div class="row">
                <div class="col-xs-4">
                    <a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" v-if="!arr[0]"></a>
                    <a @click.prevent="memeda(0)" href="#" class="glyphicon glyphicon-user" style="color:red" v-else></a>
                </div>
                <div class="col-xs-4">
                    <a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" v-if="!arr[1]"></a>
                    <a href="#" @click.prevent="memeda(1)" class="glyphicon glyphicon-home" style="color:red" v-else></a>
                    </div>
                    <div class="col-xs-4">
                            <a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" v-if="!arr[2]"></a>
                            <a href="#" @click.prevent="memeda(2)" class="glyphicon glyphicon-menu-hamburger" style="color:red" v-else></a>
                        </div>
            </div>
        </div>
    </template>
</body>
<script>
    const ops = {
        data(){
            return{
                arr:[0,0,0],
            }
        },
        template:"#navbar",
        methods: {
            memeda(index){
                this.arr.forEach((v,k)=>{
                    this.arr[k]=0;
                })
                this.$set(this.arr,index,1);
            }
        },

    };
    Vue.component("navbar",ops);
    new Vue({
        el:"#box"
    })
</script>
</html>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

注册一个局部组件

Vue.component('myTest',{
template:'<h1>你好呀~</h1>',//或者定义template标签 通过#memeda选择器获取 必须放在一个根节点里面
components:{
    testson:{
        template:'<h1>你好呀~</h1>',
        data:function(){//或者data(){}
    return {
       test:"测试组件" 
    }
},
methods:{
    function test(){
        console.log(111);
    }
}
    }
}
})

//调用
只能在父组件模板里面调用

定义插槽

<template>
<slot></slot>
</template>
名称作用
prop获取一个组件外的值 作用：父子组件传值
slot插槽，用于构建模板的时候占位，有具名和未具名的

父给子传值

<body>
    <div id="app">
    <fuji></fuji>
    </div>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                }
            },
            template:"<ziji :nihao='msg'></ziji>",// 将父级的msg通过：给绑定 调用子级组件 页面显示为msg
            components:{
                "ziji":{
                    props:["nihao"],//接受父级的值
                    data(){
                        return {
                            msg2:"子组件",
                        }
                    },
                    template:"<span>{{ nihao }}</span>",
                }
            }
        }
    }
})
</script>

子给父传值（逆向传值）

<body>
    <div id="app">
    <fuji></fuji>
    </div>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                }
            },
            methods: {
                getval(val){//接值函数
                    this.msg = val;
                }
            },
      template:"<h1><ziji @change='getval'> </ziji>{{ msg }}</h1>",// 定义接值函数 页面显示为msg2
            components:{
                "ziji":{
                    data(){
                        return {
                            msg2:"子组件",
                        }
                    },
                    template:"<span></span>",
                    created() {
                        this.$emit("change",this.msg2);//模板挂载时 将变量抛出 谁抛的谁接
                    },
                }
            }
        }
    }
})
</script>

兄弟传值

兄弟传值为 兄弟B传值给父级 然后父级再传给兄弟A

<body>
    <div id="app">
    <fuji></fuji>
    </div>
    <template id="memeda">
     
        <h1>
                {{msg}}
            <zijione :lalala="key"></zijione>
            <zijitwo  @change='getval'><zijitwo>//定义接值函数 
        </h1>
    </template>
</body>
<script>
var vm =  new Vue({
    el:"#app",
    components:{
        "fuji":{
            data() {
                return {
                    msg:"父级组件",
                    key:""
                }
            },
            methods: {
                getval(val){//接值函数
                    this.key = val;
                }
            },
            template:"#memeda",// 定义接值函数 
            components:{
                "zijione":{
                    props:["lalala"],
                    data(){
                        return {
                            msg2:"子组件1",
                        }
                    },
                    template:"<span>{{ lalala }}</span>",//已经接到值了
                    mounted() {
                      
                    },
                },
                "zijitwo":{
                    data(){
                        return {
                            msg3:"子组件2",
                        }
                    },
                    template:"<span>{{msg3}}</span>",
                    created() {
                        this.$emit("change",this.msg3);//模板挂载时 将变量抛出
                    },
                }
            },
        },
    }
})
</script>
Leave a Comment

2 Comments
  1. 奶爸de笔记 奶爸de笔记
    Reply

    我有个大佬说他要把WP换成这个代码自己写博客。

    1. 肖小帅 肖小帅
      Reply

      @奶爸de笔记那还是比较厉害::quyin:die::