Vue组件间的传值

分手后的思念是犯贱 2022-10-02 05:40 193阅读 0赞

**Vue父子组件间的通信**：props、 r e f 、 ref、 ref、emit

1.  通过prop实现通信
    
    静态传值：父组件调用子组件时绑定属性：`<v-header title="title"></v-header>`  
    子组件通过props接受父组件传递来的数据`props:['title'] or props:{title:String}`  
    动态传值：父组件调用子组件时绑定属性：`<v-header :title="title"></v-header>`  
    子组件通过props接受父组件传递来的数据`props:['title'] or props:{title:String}`
2.  通过$ref实现通信

若 r e f 使 用 在 子 组 件 上 ， 指 的 是 实 例 属 性 ， 可 以 通 过 ref使用在子组件上，指的是实例属性，可以通过 ref使用在子组件上，指的是实例属性，可以通过ref获取到定义在子组件中的属性和方法  
若 r e f 在 普 通 D O M 元 素 上 使 用 ， 指 向 的 是 D O M 元 素 ， 可 以 通 过 ref在普通DOM元素上使用，指向的是DOM元素，可以通过 ref在普通DOM元素上使用，指向的是DOM元素，可以通过ref访问DOM元素，获取到该DOM的属性集合。

1.  组件主动获取子组件的值：

调用子组件时定义一个ref：`<v-header ref="header"></v-header>`  
在父组件里通过`this.$refs.header.属性/方法`，获取子组件的属性或方法  
子组件主动获取父组件的值  
在子组件里通过`this.$parent.属性/方法` 获取父亲组件的属性和方法  
父组件

<v-header ref="msg"></v-header>
    mounted: function () {
          this.$refs.msg.getMessage('我是子组件一！')
        }

子组件：

getMessage(m){
            this.message=m;
          }

1.  通过$emit 实现通信  
     e m i t 主 要 实 现 子 组 件 向 父 组 件 通 信 ， ‘ v m . emit 主要实现子组件向父组件通信，\`vm. emit主要实现子组件向父组件通信，‘vm.emit( event, arg )`$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参 数。 子组件：`mounted: function () \{  
    this.$emit(‘getMessage’, ‘我是父组件！’)  
    \}`父组件：`<header @getMessage=“showMsg”>  
    data()\{  
    return\{  
    title:’’ \}\}  
    methods:\{  
    showMsg(title)\{  
    this.title=title; \}\}\`

**非父组组件间的传值（事件广播）**  
子组件A给子组件B广播数据：  
组件A中：1.引入vue实例;  
2.发送广播：

methods:{setData(){
                     VueEvent.$emit('to-news',this.msg);}}
           组件B中：1.引入vue实例；
    
                            2.接受广播：mounted(){
    
                                                 VueEvent.$on('to-news',function(data){
    
                                                 console.log(data);})}

注：VueEvent为创建的Vue实例