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

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

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

Vue常用的三种传值方式有:

父传子

子传父

非父子传值

组件之间的通讯:

  vm.$emit()

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

子组件在页面上展示,由于这里采用的是h-build写的,所以格式上并没有注意:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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来:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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轻易的拿到父组件的数据.

关键点:

原文地址:https://www.cnblogs.com/xiufengchen/p/10349349.html

时间: 2024-10-11 04:28:15

vue.js组件之j间的通讯一 子组件接受父祖件数据的相关文章

vue.js组件之j间的通讯三,通过单一事件来管理组件通讯

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <di

vue.js组件之j间的通讯二

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <di

Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vivi 阅读数:29918 最近用vue做一个新项目,经历了各种折磨,每次遇到问题都想大喊,格劳资上JQuery,氮素肯定是不行的,今天遇到一个小问题,Vue父组件向子组件传递一个动态的值,子组件只能获取初始值,不能实时更新? 这就有点折磨人了,设想的是,父组件发生变化获取数据,动态传递给子组件,子组

EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel

示例图 直接看下面示例代码: /** * 获取导入表单 * @returns {Ext.FormPanel} */ function getImportForm() { return new Ext.FormPanel({ //... defaults : { labelWidth : 70, labelAlign : 'right', defaultType : 'textfield'//子组件的默认类型 }, items : [{//xtype为panel(默认) columnWidth :

Vue.js(12)- 霸道的render函数渲染组件

index.html <div id="app"> <p>这是index.html</p> </div> index.js // 导入全的vue // import Vue from 'vue/dist/vue.js' // 导入阉割版的vue import Vue from 'vue' import App from './app.vue' const vm = new Vue({ el: '#app', template: `<

父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandleclick(); { <template> <div> <button @click="clickParent">点击 调用子组件</button> <child ref="mychild"></child&

Vue子页面给父页面传递数据

子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递到父页面</button> </div></template> <script> export default { name: 'child', data() { return { msg:'子组件数据' } }, computed:{ addNum(){ re

vue.js 组件之间传递数据

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文就这个知识点和大家一起来扒一扒,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册一个子组件 Vue.component(

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册