组件通信-ref链传输数据

最新推荐文章于 2025-03-31 11:15:21 发布

原创最新推荐文章于 2025-03-31 11:15:21 发布 · 461 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

本文详细介绍了Vue.js中父子组件间的数据传递与事件触发机制，包括如何使用ref链实现子组件向父组件传递数据，以及父组件如何将数据传给子组件。同时，通过实例展示了数据绑定、事件处理及属性传递的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(通过ref链实现子传父—>父传子)

	<div id="app">
        <Father></Father>
    </div>
    <template id="father">
        <!-- 组件中根元素必须唯一 -->
        <div>
            <h3> 这里是father </h3>
(7.显示父组件的值)
            <button @click='transport'>点击</button>
            <p>Father的n {{ n }} </p>
(1.绑定ref链)
            <Msga ref='msgaa'></Msga>
(4.获取兄弟组件的数据)-(8.:abc="n"把数据传送给msgb)
            <Msgb ref='msgbb':abc="n"></Msgb>
        </div>
    </template>
    <template id="msga">
        <div>
            <h3> 这里是 msg1 </h3>
        </div>
    </template>

    <template id="msgb">
        <div>
            <h3> 这里是msg2 </h3>
(10.绑定事件)
			<button @click="output">输出数据</button>
        </div>
    </template>
_____________________________________________________________________________
    Vue.component('Father', {
        template: '#father',
(5.将数据传给父组件)
        data() {
            return {
                n: 0
            }
        },
(6.父组件保存数据的值)
       	methods: {
            transport() {
                this.n = this.$refs.msgaa.content
            }
        }
    })

    Vue.component('Msga', {
        template: '#msga'，
(2.数据传输)
        data(){
            return{
                content:数据
            }
        }
    })

    Vue.component('Msgb', {
        template: '#msgb'，
(3.数据接收)
        data(){
            return{
                num:0
            }
        },
(9.定义接收数据)
        methods:{
            output(){
              console.log(this.$attrs.abc)  
            }
        }
    })
    new Vue({
        el: '#app'
    })