vue中组件通信之子父通信

原创 2018年04月15日 09:27:53

index.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <balance></balance>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>


main.js:

Vue.component('balance', {
    template: `
        <div>
            <show @show-balance="show_balance"></show>
            <div v-if="show">
                您的余额: 98
            </div>
        </div>
     `,
    data: function(){
        return {
            show: false
        }
    },
    methods: {
        show_balance: function(data){
            this.show = true;
            console.log(data);
        }
    }
});

Vue.component('show', {
    template: '<button @click="on_click">显示余额</button>',
    methods: {
        on_click: function(){
            this.$emit('show-balance', {a: 1, b: 2});
        }
    }
})

new Vue({
    el: '#app'
})

vue 父组件与子组件相互通信

父组件传值到子组件注册一个子组件,需要向子组件传值,给渲染的子组件自定义标签属性,绑定传输数据msg是绑定的自定义属性,类似我们原生html 给标签自定义属性一样,Widget是传输变量, 子组件接...
  • github_37847992
  • github_37847992
  • 2017-10-06 21:50:58
  • 806

Vuejs——(10)组件——父子组件通信

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文...
  • qq20004604
  • qq20004604
  • 2016-09-05 17:08:44
  • 11696

总结vue父子组件之间的通信

一 环境搭建 步骤 1 打开git,运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo ...
  • Johnny0991
  • Johnny0991
  • 2017-11-15 11:03:10
  • 3698

Vue父子组件互相通信实例

组件实例之间的作用域是独立的,意味了不应该在子组件的模板内直接引用父组件的数据,但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。 prop 是父组件...
  • major_zhang
  • major_zhang
  • 2018-01-20 20:23:47
  • 300

vue父子组件通信问题解决的思路之一

组件之间的作用域独立,而组件之间经常又需要传递数据。 A 为父组件,下面有子组件 B 和 C。 A 的数据可以通过 props 传递给 B 和 C。 A 可以通过 $broadcast ...
  • qq_34986769
  • qq_34986769
  • 2017-02-28 08:52:11
  • 2089

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一、父组件利用props往子组件传输数据 父组件: //注意传递参数时要用...
  • heshan1992
  • heshan1992
  • 2017-08-18 09:44:54
  • 519

vue.js父子组件通信动态绑定

  • hefeng6500
  • hefeng6500
  • 2017-07-08 15:12:11
  • 348

vue2中(路由/父子/组件/事件)数据通信方法总结

vue2中(路由/父子/组件/事件)数据通信方法总结
  • lemon_zhao
  • lemon_zhao
  • 2017-08-03 10:27:45
  • 3602

Vue 父子组件、组件间通信

组件
  • H1069495874
  • H1069495874
  • 2017-03-03 11:25:38
  • 1940

vue如何实现父子组件通信,以及非父子组件通信(待看)

https://vuefe.cn/v2/guide/components.html# 非父子关系 var vm = new Vue({ el: '#list', ready: functio...
  • melody_day
  • melody_day
  • 2016-12-08 10:14:04
  • 2655
收藏助手
不良信息举报
您举报文章:vue中组件通信之子父通信
举报原因:
原因补充:

(最多只允许输入30个字)