vue组件之间的通信

最新推荐文章于 2024-11-12 16:39:38 发布

javascript艺术

最新推荐文章于 2024-11-12 16:39:38 发布

阅读量362

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/zhangjing1019/article/details/77344464

一、组件之间的通信

组件之间数据传递：
props down,events up

1、父组件给子组件传值

props down

步骤：
①在创建子组件指定属性，把要传递的值给属性
<son name='zhangsan'></son>
②在子组件内部声明props属性
props:['name']
//props数组中的元素就是属性的名称，在组件创建完成之后，只要是通过该属性传值了，就可以直接在props的元素中拿到传递过来的数据

注意事项：
1、在组件中，data属性必须是一个带有返回值而且返回值是对象的方法
2、如果在通过属性传值时，值是会变化，通过v-bind指令将变量绑定到属性
<son v-bind:name='kw'></son>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    {{msg}}
    <father></father>
</div>

<script type="text/x-template" id="father-template">
    <div>
        <h1>this is father component</h1>
        <input type="text" v-model="kw"/>
        <button @click="handleClick">clickMe</button>
        <hr/>
        <son :name="kw"></son>
    </div>
</script>
<script type="text/x-template" id="son-template">
    <div>
        <h1>this is son component</h1>
        <span>{{"接受到的数据为:"+name}}</span>
    </div>
</script>

<script>
    //创建组件
    //在组件中，data属性必须是一个带有返回值而且返回值是对象的方法
    Vue.component('father',{
        template:'#father-template',
        data: function () {
            return{
                kw:''
            }
        },
        methods:{
            handleClick: function () {
                console.log('ready to update data');
            }
        }
    })

    Vue.component('son',{
        props:['name'],
        template:"#son-template"
    })

    new Vue({
        el: '#example',
        data: {
            msg: 'Hello Directive'
        }
    })
</script>

</body>
</html>

2、子组件和父组件通信
events up

步骤：
要想通过事件传值，要约定事件的名称：toFather
①在调用子组件时绑定自定义的事件
<son @toFather=""></son>
②在子组件中触发自定义的事件，并传值
this.$emit('事件的名称','传递的数据')
this.$emit('toFather',123);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    {{msg}}
    <father></father>
</div>

<script type="text/x-template" id="father-template">
    <div>
        <h1>this is father component</h1>
        <span>{{"儿子发来的数据："+msgFromSon}}</span>
        <hr/>
        <son @toFather="recEvent"></son>
    </div>
</script>
<script type="text/x-template" id="son-template">
    <div>
        <h1>this is son component</h1>
        <input type="text" v-model="kw"/>
        <button @click="handleClick">sendToFather</button>
    </div>
</script>
<script>
    Vue.component('father',{
        template:'#father-template',
        data:function(){
          return {
              msgFromSon:''
          }
        },
        methods:{
            recEvent:function(result){
                this.msgFromSon = result
            }
        }
    })
    Vue.component('son',{
        template:'#son-template',
        data:function(){
            return{
                kw:''
            }
        },
        methods:{
            handleClick: function () {
                //通过事件向父组件传递数据
                this.$emit('toFather',this.kw)
            }
        }
    })

    new Vue({
        el: '#example',
        data: {
            msg: 'Hello Directive'
        }
    })
</script>

</body>
</html>

3、ref
父组件操作子组件：

<子组件 ref='名称'></子组件>
在父组件中可以通过:this.$refs.名称
(react: this.refs.名称)

子组件操作父组件：
this.$parent.属性或者方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    {{msg}}
    <father></father>
</div>

<script type="text/x-template" id="father-template">
    <div>
        <h1>father component</h1>
        <button @click="checkSonStatus">查看儿子在干嘛</button>
        <hr/>
        <son ref="mySon"></son>
    </div>
</script>
<script type="text/x-template" id="son-template">
    <div>
        <h1>son component</h1>
        <button @click="checkParentStatus">查看老爹在干嘛</button>
    </div>
</script>
<script>

    Vue.component('father', {
        template: '#father-template',
        data:function(){
            return {
                name:'zhangsantadie'
            }
        },
        methods:{
            nowDoing: function () {
                return ' is eating...'
            },
            checkSonStatus:function(){
                //得到儿子的名称
                var sonName = this.$refs.mySon.name;
                //得到在干嘛
                var sonStatus = this.$refs.mySon.nowDoing();
                //返回
                console.log(sonName+sonStatus);
            }
        }
    })
    Vue.component('son', {
        template: '#son-template',
        data:function(){
            return {
                name:'zhangsan'
            }
        },
        methods:{
            nowDoing: function () {
                return ' is study...'
            },
            checkParentStatus: function () {
                //如何获取父组件
                // this.$parent
                console.log(this.$parent.name+this.$parent.nowDoing());
            }
        }
    })
    new Vue({
        el: '#example',
        data: {
            msg: 'Hello Directive'
        }
    })
</script>

</body>
</html>

4、兄弟组件之间通信
借助于事件
var bus = new Vue()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    <chat-room></chat-room>
</div>

<script type="text/x-template" id="charRoomTempalte">
    <div>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
        <lucy></lucy>
        <mike></mike>
    </div>
</script>
<script type="text/x-template" id="lucyTempalte">
    <div>
        <label >lucy</label>
        <input type="text" v-model="lucyTxt"/>
        <button @click="send">发送</button>
    </div>
</script>
<script type="text/x-template" id="mikeTempalte">
    <div>
        <label >mike</label>
        <input type="text" v-model="mikeTxt"/>
        <button @click="send">发送</button>
    </div>
</script>
<script>
    Vue.component('chat-room', {
        template: '#charRoomTempalte',
        data: function () {
            return{
                list:[]
            }
        }
    })
    Vue.component('lucy', {
        template: '#lucyTempalte',
        data: function () {
          return {
              lucyTxt:''
          }
        },
        methods:{
            send: function () {
                //将lucy输入的内容存到聊天室的列表中
                this.$parent.list.push('lucy:'+this.lucyTxt);
            }
        }
    })
    Vue.component('mike', {
        template: '#mikeTempalte',
        data: function () {
            return {
                mikeTxt:''
            }
        },
        methods:{
            send: function () {
                //将lucy输入的内容存到聊天室的列表中
                this.$parent.list.push('mike:'+this.mikeTxt);
            }
        }
    })
    new Vue({
        el: '#example',
        data: {
            msg: 'Hello Directive'
        }
    })
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="example">
    <laoda></laoda>
    <hr/>
    <laoer></laoer>
</div>

<script type="text/x-template" id="laoda-template">
    <div>
        <h1>laoda</h1>
        <button @click="tellLaoer">回家吃饭</button>
    </div>
</script>
<script type="text/x-template" id="laoer-template">
    <div>
        <h1>laoer</h1>
        <span v-if="msgFromLaoDa">{{"老大说："+msgFromLaoDa}}</span>
    </div>
</script>
<script>

    //新建一个Vue的实例，通过bus完成事件的绑定和触发
    var bus = new Vue();

    Vue.component('laoda', {
        template: '#laoda-template',
        methods:{
            tellLaoer: function () {
                //触发事件通知老二回家吃饭
                bus.$emit('eventToBrother','赶紧回家吃饭')
            }
        }
    })
    Vue.component('laoer', {
        template: '#laoer-template',
        data:function(){
            return {
                msgFromLaoDa:null
            }
        },
        mounted: function () {
            //事件的绑定
            bus.$on('eventToBrother', function (result) {
                console.log(result);
                this.msgFromLaoDa = result;
            }.bind(this))
        }
    })

    new Vue({
        el: '#example',
        data: {
            msg: 'Hello Directive'
        }
    })
</script>

</body>
</html>