vuejs如何实现兄弟组件传参

vuejs如何实现兄弟组件传参，下面web建站小编给大家详细介绍一下实现代码！

实现代码如下；

<div id="app">
  //父级状态
  <p>{{state}}</p>
  <c1 @test_c1='changeA'></c1>
  <c2 :test_c2='state'></c2>
</div>
 
<template id="c1">
  <div>这里是c1组件
    <button @click='changeB'>c1按钮</button>
  </div>
</template>
 
<template id="c2">
  <div>这里是c2组件,状态：{{test_c2}}
    <div v-show='test_c2'>我是c2中的div</div>
  </div>
</template>
 
<script src='../vue/vue.js'></script>
<script>
Vue.component("c2",{
  template:"#c2",
  props:['test_c2']
})
 
Vue.component("c1",{
  template:"#c1",
  methods:{
    changeB(){
      this.$emit("test_c1")
    }
  }
})
 
new Vue({
  el:"#app",
  data:{
    state:true
  },
  methods:{
    changeA(){
      this.state = !this.state;
    }
  }
})
</script>

vuejs项目开发如何利用expose/ref实现父子组件传参

vuejs项目开发如何利用emits实现父子组件传参

vuejs项目开发如何利用Props实现父子组件传参

vue如何实现非父子组件传值

vue如何实现子组件向父组件传值

标签： 组件传参

上面是“vuejs如何实现兄弟组件传参”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_3056.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！