Vue.js组件—父组件与子组件之间的数据联系_父组件的数据变化跟子组件有个元素有关系 vue怎么做-CSDN博客

本文链接：https://blog.csdn.net/u014304657/article/details/76209868

本文探讨Vue.js中父组件如何向子组件传递数据，以及子组件如何通过事件与父组件通信。通过实例代码展示了使用v-bind避免属性插值，以及利用Vue组件的事件系统实现数据交互。同时，介绍了在同一页面上定义和使用多个组件的方法。

摘要由CSDN通过智能技术生成

Vue.js中的组件可以理解为自己定义的标签；而组件化的目的则可以理解为方便代码复用。

父组件和子组件之间是如何进行数据联系的呢？

父组件向子组件传递数据：

html代码如下：

    <div id="app">
        <counter heading="完美极了" bgcolor="green" fontsize="16"></counter>  //这里的heading,bgcolor,fontsize是要传给子组件的数据
        <counter heading="糟糕透了" bgcolor="red" fontsize="16"></counter>
    </div>
    <template id="mycounter">
        <div class="">
            <h1>{
  { heading }}</h1>
            <button type="button" name="button" @click="plus" v-bind:style="{background: bgcolor,fontSize: fontsize + 'px',color: '#fff',border: 'none'}">赞赞赞{
  { count }}</button>
        </div>
    </template>

js代码如下：

    
    <script src="vue.js" type="text/javascript"></script>
    <script type="text/javascript">
        Vue.component("counter",{
            template:"#mycounter",
            data:function(){
                return { count : 0};  //组件中的data必须是一个函数
            },
            props:["heading","bgcolor","fontsize"],  //使用props声明从父组件传过来的数据后，子组件才可以使用
            methods : {
                plus : function(){