vue 父子组件通信

简述

在Vue中，各种组件之间他们的作用域是孤立的，因此，无法直接彼此共享数据。

---

一个简单的实例

当父组件的数据更新时，子组件能够同步数据

---

子组件

child.vue

<template>
    <div class="child">
        <img src="staticImgUrl" />
        <span>{{ context }}</span>
        <p v-html="pText"></p>
    </div>
</template>

export default {
    name: "child",
    components: {},
    props:[   // 绑定子组件自身的属性数据

        "staticImgUrl", // 静态图片url
        "context", // 文本
        "pText" // 带html标签的文本
    ],
    data() {
        return {};
    }
    methods: {}
}

父组件

parent.vue

<template>

    <div class="container"> 
        <Child :staticImgUrl="obj.url" :context="obj.context" :pText=""obj.text></Child>
    </div>
</template>

import Child from "./child"  // 引入子组件



export default {
    name: "parent",
    components: {
        Child       // 添加子组件
    },
    data() {    // 父组件的数据项
        return {
            obj: {    //所有数据封装在obj对象中，便于管理
                url: "abc.jpg",
                context:"abcdefg",
                text:"abc</br>efg"
            }
        };
    }
    methods: {}
}

---

最终页面

<div class="container"> 
        <img src="abc.jpg" />
        <span>abcdefg</span>
        <p innerHTML="abc</br>efg"></p>
</div>

---

过程说明

    <Child :staticImgUrl="obj.url" :context="obj.context" :pText=""obj.text></Child>

这条语句是将父子组件进行了动态关联，当父组件数据改变，通过obj对象中的值(url,context,text)传给子组件的属性(staticImgUrl,context,pText)
以下是官方对动态传值的解释

---