有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 组件通信

vue cat 7个月前 (02-21) 154次浏览 已收录 0个评论 扫描二维码

父传子:

自定义属性:

子组件中,通过 props 来自定义属性
父组件中,负责把数据,通过 v-bind: 绑定给子组件

父组件向子组件共享数据需要使用自定义属性。示例代码如下:

//父组件
 <Son :msg="message" :user= "user info"></Son>

  data() {
    return {
      message: "hello vue.js",
      userinfo: { name: "zs", age: 20 },
    };
  },
 //子组件
<template>
  <div>
    <h5>Son组件</h5>
    <p>父组件传递过来的msg值是: {{ msg }}</p>
    <p>父组件传递过来的user值是: {{ user }}</p>
  </div>
</template>

props: ['msg','user']

子传父:

自定义事件:

在子组件中调用 this.$emit() 来触发自定义事件
参数1:字符串,表示自定义事件的名称
参数2:值,要发送给父组件的数据
在父组件中,通过 v-on: 来绑定自定义事件,并提供一个事件处理函数。通过事件处理函数的形参,接收到子组件传递过来的数据。

子组件向父组件共享数据使用自定义事件。示例代码如下:

 //子组件
export default {
    data() {
        return {
            {count: 0}
        }
    },
    methods: {
        this.count += 1
        //修改数据时,通过$emit() 触发自定义事件
        this.$emit( 'numchange',this.count)
    }
}
//父组件
<Soni @numchange="getNewCount"></Son>

export default {
    data() {
        return {
            countFromSon: 0
        }
    },
    methods: {
        getNewCount(val) {
        this.countFromSon = val
        }
    }
}

兄弟组件之间传值:

1.在main.js中创建vue实例

main.js给vue的原型添加一个属性,属性值为new Vue()
Vue.prototype.$bus = new Vue()

2.在兄弟组件mychild中

<button type="default" @click="sendBro">发送给兄弟组件</button>
methods:{
    sendBro(){
        this.$bus.$emit("toBro","发送给兄弟组件")
    }
}

3.在兄弟组件mya中接受

mounted() {
    this.$bus.$on("toBro",(name)=>{
        console.log(name)
    })
}
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址