vue中组件的数据传递

Vue 组件之间数据传递的几种方式：

父组件向子组件传递数据，使用props属性；子组件向父组件中传递数据，在子组件中使用$emit派发事件，父组件中使用v-on 监听事件；

通过 Vue.Js 的状态管理模式 Vuex，实现多个组件进行数据共享，推荐使用这种方式进行项目中各组件间的数据传递。
下面详细介绍数据传递的几种方式：

1.父组件向子组件中传递数据

<div id="app">
    <div>{{num}}</div>
    <!-- 将父组件中的num，传递给子组件中的sub-num -->
    <blog-count :sub-num="num" :sub-user="user"></blog-count>
</div>
 
<script>
   const blogCount={
        //子组件中通过props属性接收父组件传递过来的数据
       props:["subNum","subUser"],
       template:`<div>
                   <p>这是从父组件传进来的数字：{{subNum}}</p>
                   <p>这是从父组件传进来的对象：{{subUser.name}}-{{subUser.age}}</p>
               </div>`,
      
   }
   var vm=new Vue({
       el:"#app",
       data:{
           num:2,
           user:{
               name:"zhangsan",
               age:18
           }
       },
       components:{
            blogCount
       }
   })
</script>

2.子组件向父组件传递数据，通过 $emit派发事件，父组件中通过 v-on 接收该事件，拿到传递的数据。

<div id="app">
    <div>{{num}}</div>
    <!-- 通过 v-on 监听事件-->
    <blog-count @countchange="changeHandle"></blog-count>
</div>
 
<script>
    const blogCount={
        template:`<button @click="clickHandle">点击接收子组件传递过来的数据</button>`,
        data(){
            return {num:6}
        },
        methods: {
            clickHandle(){
                //使用 $emit派发事件
                this.$emit("countchange",this.num);
            }
        }
    }
    var vm=new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods: {
            changeHandle(data){
                this.num=data;
            }
        },
        components:{
            blogCount
        }
    })
</script>