能不能指点一下哪个是父组件那个子组件？

父子组件通信怎么弄？ Vue基础的那一章没有讲啊建议以后加上！！

名渊 2019-06-30

收起

2回答

卡布琦诺 2019-06-30 19:02:12

兄弟组件通信一般是借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发，示例如下（这里为了方便演示效果，使用的是引入<script src="https://cdn.jsdelivr.net/npm/vue"></script>的方法）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>兄弟通信</title>
    <style>
        #wrap1,
        #wrap2 {
            width: 300px;
            padding: 20px;
            border: 1px solid red;
            border-radius: 8px;
            margin: auto;
        }
  
        #wrap1 {
            margin-bottom: 20px;
            border: 1px solid blue;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
  
<body>
    <div id="app">
        <son1></son1>
        <son2></son2>
    </div>
</body>
  
</html>
<!--子组件son1-->
<template id="son1">
    <div id="wrap1">
        <h2>子组件1</h2>
        <button @click="toSon2('hello world')">向son2发消息</button>
    </div>
  
</template>
<!--子组件son2-->
<template id="son2">
    <div id="wrap2">
        <h2>子组件2</h2>
        <p>显示son1传过来的内容:{{greeting}}</p>
    </div>
</template>
<script>
    var totalVm = new Vue();
    var son1 = {
        template: '#son1',
        methods: {
            toSon2(str) {
                // 发消息都是通过viewmodel的实例对象发送的
                totalVm.$emit('event1', str);
            }
        }
    };
    var son2 = {
        template: '#son2',
        created() {
            totalVm.$on('event1', this.fn1);
        },
        data() {
            return {
                greeting: ''
            }
        },
        methods: {
            fn1(str) {
                console.log("子组件2收到子组件1的消息",str);
                this.greeting = str;
            }
        }
  
    };
    new Vue({
        el: '#app',
        data: {},
        components: {
            son1,
            son2
        },
        created() {
            // 只要实例监听到该事件,当有组件发送($emit)时,就会触发回调函数
            totalVm.$on('event1', (str) => {
                console.log('父级接收到的消息:', str)
            });
        }
    });
</script>

实现思路是在son1子组件中，给button按钮绑定一个点击事件toSon2, 在事件中通过公共的vue对象totalVm.$emit()方法去触发一个定义事件event1,并传递参数str，然后在son2组件创建的钩子created()中监听事件event1, 并触发回调函数fn1, fn1在methods中声明，用来输出传入的参数hello world’

同学可以自己测试一下效果，理解一下哦

希望可以帮到你！

收起回答

卡布琦诺 2019-06-30 18:25:59

1、先来了解什么是父组件、什么是子组件

每个组件都是一份独立的实例，所谓父子组件，指的只是它们的引用关系，因为在A里面引用了B，所以B是A的子组件，假设有两个 vue 文件 one.vue和two.vue，在one.vue中会注册two.vue，如下所示：

import Two from ./two...
new Vue({
...    
components: { Two},
...
})

这个时候，父组件是one.vue，子组件是two.vue

2、父组件通过 prop 给子组件下发数据，子组件通过$emit触发事件给父组件发送消息，即 prop 向下传递，事件向上传递，示例：

<template>
    <div class="parent">
        <h1>我是父组件</h1>
        <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
        <!--通过:msg将父组件的数据传递给子组件-->
        <children :msg="msg" @say="parentSay"></children>
    </div>
</template>
<script>
import Children from './children.vue'
export default {
    data() {
        return {
            msg: 'hello, children'
        }
    },
    methods: { 
    // 参数就是子组件传递出来的数据
        parentSay(msg) {
            console.log(msg) // hello, parent
        }
    }, 
    // 引入子组件
    components: {
        children: Children
    }
}
</script>

子组件：

<template>
  <div class="hello">
    <div class="children" @click="say">
      <h1>我是子组件</h1>
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>
 
  </div>
</template>
 
<script>
 
  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
 
      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>