Vue.js入门（6）组件间通信

序言

Vue.js入门（6）组件间通信

如果你了解过JavaScript的设计模式一一观察者模式，一定知道dispatchEvent和addEventListener这两个方法。

Vue组件也有与之类似的一套模式，子组件用$emit()来触发事件，父组件用$on()来监昕子组件的事件。

父传子

通过prop实现通信

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../assets/js/vue.js"></script>
</head>
<body>

    <div id="app">
        <div>{{pmsg}}</div>
        <child title='来自父组件的值'></child>
      </div>
    
      <template id="childtmpl">
        <div>
            <div>{{msg}}-{{title}}</div>
        </div>
      </template>

      <script type="text/javascript">
      //子组件
        Vue.component('child', {
          props: ['title'],
          data: function() {
            return {
              msg: '子组件本身的数据'
            }
          },
          template: '#childtmpl'
        });

        //父组件
        var vm = new Vue({
          el: '#app',
          data: {
            pmsg: '父组件',
          }
        });
      </script>
</body>
</html>

View Code