组件通信---兄弟组件通信

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 定义一个容器 id名为app -->
  <div id="app">
    <!-- 使用组件 -->
    <home></home>
  </div>

<!-- 引入vue.js -->
  <script src="./vue.js"></script>
  <script>
    /* 
    定义一个第三方实例,new vue
    在兄弟a组件中$emit触发一个自定义事件,
    通过这个实例在兄弟组件b中通过$on来监听 实例emit的自定义事件
    */
  //  定义一个第三方实例 并命名为bus
    const bus = new Vue();
    const Child = {
      //定义一个子组件
      //模板
      template: `
        

我是子组件1

// 子组件定义一个自定义事件
`
, //data属性需要以函数形式,return data(){ return { msg: '我是子组件1的数据' } }, //定义子组件的方法 methods: { biubiubiu(){ //点击按钮时触发函数 将自组件1的数据发送给子组件2 bus.$emit('piupiupiu', this.msg) //通过第三方实例调用$emit方法, //第一个参数为自定义事件名 //第二个参数为所携带的参数 } } } // 定义第二个自组件 const Child2 = { template: `

我是子组件2

{{ msg }}
`
, mounted(){ // 这个方法会自动触发 (在组件初始化之后) /* bus.$on('piupiupiu', (msg)=>{ this.msg = msg; }) */ // const _this = this; // 使用第三方实例$on bus.$on('piupiupiu', function(msg){ this.msg = msg; }.bind(this)) }, data(){ return { msg: '' } }, } // 父组件 const Home = { template: `

我是父组件1


子组件1
子组件2
`
, data(){ return { msg: '' } }, components: { Child, Child2 } } // 注册Home组件 Vue.component('Home', Home); const vm = new Vue({ // 挂载到app上 el: '#app', data: { } }) </script> </body> </html>

你可能感兴趣的:(vue2,vue.js,javascript,前端)