vue.js组件之j间的通信一子组件接受父祖件数据

时间 2020-05-05

原文原文链接

Vue2.0的三种经常使用传值方式、父传子、子传父、非父子组件传值

在Vue的框架开发的项目过程当中，常常会用到组件来管理不一样的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？好比一个组件调用另外一个组件做为本身的子组件，那么咱们如何进行给子组件进行传值呢？若是是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的状况。固然你也能够用Vuex状态管理工具来实现，这部分咱们后续会单独介绍。我先给你们介绍Vue开发中经常使用的三种传值方式。html

Vue经常使用的三种传值方式有：vue

父传子npm

子传父app

非父子传值
框架

组件之间的通信:函数

　　vm.$emit()工具

　　vm.$on()写在组件里面的网站

子组件在页面上展现,因为这里采用的是h-build写的,因此格式上并无注意:ui

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <child-com></child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子组件</h2>
            </div>
        </template>
    </body>
    <script>
        
        
        //生命周期函数,就是vue实力在某个时间点会自动执行的函数
        
        var app =new Vue({ el:"#app1", data:{ }, components:{ 'child-com':{ template:'#child' } } }) </script>
</html>

能够看到组件在页面上展现了,,子组件想拿到父组件的一些数据<须要经过props来:spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <!--组件关联,将msg展现在页面,最终展现值为msg,因此须要使用msg进行传值-->
            <child-com :msg="a">
            <!--//:msg至关于v-model进行数据绑定 -->
            </child-com>
        </div>
        <template id="child">
            <div>
                <h2>我是子组件</h2>
                <!--//在子组件中进行展现-->
                <strong>{{msg}}</strong>
            </div>
        </template>
    </body>
    <script>
        var app =new Vue({ el:"#app1", data:{ a:'我是父组件的数据' }, /*//子组件,利用props进行数据传递:*/ components:{ 'child-com':{ props:['msg'], template:'#child' } } }) </script>
</html>

展现效果:

子组件就能够i轻易的拿到父组件的数据.

关键点:

vue.js组件之j间的通信一 子组件接受父祖件数据

Vue2.0的三种经常使用传值方式、父传子、子传父、非父子组件传值

vue.js组件之j间的通信一子组件接受父祖件数据