争怎路由网/网站教程/内容

vue组件之间相互传递数据的完成方法（代码）

网站教程2024-05-17 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于php协成实现的详解（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1、子组件给父组件传递数据

<body>
    <div id="app">
        父组件：{{total}}
        <br>
        <son-component v-bind:total="total"></son-component>
    </div>
    <script>
         Vue.component('son-component',{
            template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',
            props:{
                total:Number
            },
            data(){
                return {
                    num:10
                }
            },
            computed:{
                add:function(){
                    return num=this.total+this.num
                }
            }
        })
        var app=new Vue({
            el:'#app',
            data:{
                total:1
            },
           
        })
    </script>
</body>

通过v-bind动态绑定父组件中要传递的数据，子组件通过props属性接收父组件传递的数据。

2.父组件给子组件传递数据

<body>
    <div id="app">
        <son-component v-on:change="getData"></son-component>
        <br>
        {{total}}
    </div>
    <script>
        Vue.component('son-component',{
            template:'<button v-on:click=sendData>点击我向父组件传值</button>',
            data(){
                return{
                    count:1
                }
            },
            methods:{
                sendData:function(){
                    this.$emit('change',this.count)
                }
            }
        })
        var app=new Vue({
            el:'#app',
            data:{
                total:1
            },
            methods:{
                getData:function(value){
                    this.total=this.total+value
                }
            }
        })
    </script>
</body>

自定义一个事件，在子组件中通过this.$emit()触发自定义事件并给父组件传递数据，在父组件中监听自定义事件并接收数据。

3.非父子组件之间的通信

<body>
    <div id="app">
            <a-component></a-component>
            <b-component></b-component>
    </div>
    <script>
        Vue.component('a-component',{
            template:`
                <div>
                    <span>a组件的数据：{{num}}</span><br>
                    <button v-on:click="sendData">击我向b组件传递数据</button>
                </div>
            `,
            data(){
                return {
                    num:1
                }
            },
            methods:{
                sendData:function(){
                    this.$root.bus.$emit('change',this.num)
                }
            }
        })
        Vue.component('b-component',{
            template:`
                <div>b组件接收a组件数据后相加的数据：{{count}}</div>
            `,
            data(){
                return {
                    count: 10
                }
            },
            created:function(){
                this.$root.bus.$on('change',(value)=>{
                    //alert(value)
                    this.count=this.count+value
                })
            }
        })
        var app=new Vue({
            el:'#app',
            data:{
                bus:new Vue()
            },
        })
    </script>
</body>
以上就是vue组件之间相互传递数据的实现方法（代码）的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
    • 
				

    网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



          
    ……
    标签:vue组件之间相互传递数据的完成办法（代码）
     
    相关阅读