Vue组件之间的传参

Vue组件之间的传参方式有三种

　　第一：父传子

　　第二：子传父

　　第三：兄弟之间相传

第一，父传子，顾名思义，外层组件传参给嵌套内部的组件

　　在父代中嵌套的标签

　　<son v-bind:toSon="fatherData"></son> //发送数据给子代
　　在子代中接收数据
　　需要添加一个属性叫做prpos

　　　props:["toSon"],

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script type="text/javascript">
    Vue.component("father",{
        data:function(){
            return {
                fatherData:"我是你爸爸",
            }
        },
        template:`
            <div>
                <h1>我是父代</h1>
                <input type="text" v-model="fatherData">
                <son v-bind:toSon="fatherData"></son> 
            </div>
        `
    })
    Vue.component("son",{
        props:["toSon"],
        template:`<div>
                <h1>我是子代</h1>
                <span>这是我老爸说的话{{ toSon }}</span>
        </div>`
    })
    new Vue({
        el:"#app",
    })

    </script>
</body>
</html>

第二，子传父，

　　子代传给父代需要使用方法，具体看代码注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script type="text/javascript">
    Vue.component("father",{
        data:function(){
            return {
                fatherData:"我是你爸爸",
                msg:"",
            }
        },
        methods:{
            resSonData:function(data){  //父代用来接收子代传送的数据
                this.msg = data;
            }
        },
        template:`
            <div>
                <h1>我是父代</h1>
                <span>这是我儿子说的话{{ msg }}</span>
                <son v-on:toFatherSonData="resSonData"></son>  //要在子代上面绑定方法
                //这个v-on后面的参数是一个事件类型名称，=号后面的是方法名
            </div>
        `
    })
    Vue.component("son",{
        data:function(){
            return {
                sonData:"我是你儿子",
            }
        },
        methods:{
            toFather(){ //子代向父代发送数据的方法
                this.$emit("toFatherSonData",this.sonData);
                    // 第一个参数，这是我们自定义的事件类型名，不是方法
            }
        },
        props:["toSon"],
        template:`<div>
                <h1>我是子代</h1>
                <input type="text" v-model="sonData" @input="toFather">
        </div>`
    })
    new Vue({
        el:"#app",
    })
    </script>
</body>
</html>

学完以上两种传参的方式，现在我们来用$refs和$parent两个方法来试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之间的传值-$refs&$parent</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script type="text/javascript">
    Vue.component("father",{
        data:function(){
            return {
                fatherData:"我是父代组件中内容",
                msg:"",
            }
        },
        methods:{
            chickSon:function(){
                console.log(this.$refs.mySon.sonData);
                
            }
        },
        template:`
            <div>
                <h1>我是父代</h1>
                <button @click="chickSon">查看子代中内容</button>

                <son  ref="mySon"></son>  
                
            </div>
        `
    })
    Vue.component("son",{
        data:function(){
            return {
                sonData:"我是子代组件中内容",
            }
        },
        methods:{
            chickFather:function(){
                console.log(this.$parent.fatherData)
            }
        },
        template:`<div>
                <h1>我是子代</h1>
                <button @click="chickFather">查看父代中的内容</button>
                
        </div>`
    })
    new Vue({
        el:"#app",
    })

    </script>
</body>
</html>

第三，兄弟组件之间的参数传递

注意：兄弟组件传参必须依靠一个vue实例来进行，

关键方法：

$emit("参数名",callblack) 用来发送数据的方法

$on("参数名",callback)　　用来接收数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟组件之间传递参数</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">

        <bigbrother></bigbrother>
        <hr>
        <youngerbrother></youngerbrother>
    </div>
    <script type="text/javascript">
    // 兄弟组件之间传值必须依靠外界
    // 依靠新的一个vue的实例
    var vm = new Vue();
    Vue.component("bigbrother",{
        data:function(){
            return {
                bigBrotherData:"这是哥哥说的话",
                
            }
        },
        methods:{ //这是发送数据的方法,定义在methods里面
            tellYoungerBrother:function(){   
                console.log(this)
                vm.$emit('toYoungerBrother',this.bigBrotherData);//必须借用Vue的实例来完成数据的传递    
                
            }
        },
        created:function(){ //这是接收兄弟发来的信息，需要用一个方法来接收
                //关键方法，$on
                vm.$on('toBigBrother',function(data){
                    console.log(data)
                    
                })
        },
        template:`
            <div>
                <h1>我是哥哥</h1>{{ bigBrotherData }}
                <button @click="tellYoungerBrother">发送给弟弟</button>
                <h2>这是弟弟说的话:</h2> 
            </div>
        `
    })
    Vue.component("youngerbrother",{
        data:function(){
            return {
                youngerBrotherData:"这是弟弟说的话"
            }
        },
        methods:{
            tellBigBrother:function(){
                vm.$emit("toBigBrother",this.youngerBrotherData);
            }
        },
        created : function(){
            vm.$on("toYoungerBrother",function(data){
                console.log(data);
            })
        },
        template:`<div>
                <h1>我是弟弟</h1>
                <button @click="tellBigBrother">发送给哥哥</button>
                <h2>这是哥哥说的话:{{  }}</h2>     
        </div>`
    })
    new Vue({
            el : "#app",
                data : {
                    msg : "hello"
                }
            })

    </script>
</body>
</html>

Vue组件之间的传参

猜你喜欢