Vue的组件间通信

最新推荐文章于 2024-07-25 09:35:22 发布

weixin_43817169

最新推荐文章于 2024-07-25 09:35:22 发布

阅读量85

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43817169/article/details/104682502

版权

vue组件通信的几种方法

1.父向子传值:

父亲：通过属性给子组件传值;
儿子：通过props接受值

<body>
  <div id="app">
    <child ff="直接赋值" :father="msg"></child>
  </div>
</body>
<script>
  Vue.component('child', {
    props: ['ff', 'father'],
    template: `<div>这是儿子--{{mm}}--{{father}}</div>`
  })
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '我是来自父组件的值'
    }
  })

2.子向父传值:

父亲：通过v-on传递 v-on:yy=“callback”
儿子：通过$emit(‘yy’, 6666)调用父亲给传递的函数并传递参数

<body>
  <div id="app">
    <child v-on:yy="callback"></child>
  </div>
</body>
</html>
<script>
  // 子向父传值 可以理解为 父给子传递一个函数或发布订阅
  // 父亲 通过v-on传递  v-on:yy="callback"
  // 儿子：通过$emit('yy', 6666)调用父亲给我传递的函数并传递参数
  // 也可以通过发布订阅方式理解：
  // 父亲订阅公众号v-on:yy="callback" 父亲订阅和儿子发布一定要是同一个公众号
  // 儿子通过公众号发布消息$emit('yy', 6666) yy就好比公众号
  Vue.component('child', {
    data() {
      return {
        jx: 10
      }
    },
    template: `<div>
      这是儿子
      <button @click="$emit('yy', 6666)">给父亲传值1</button>
      <button @click="btnClick">给父亲传值2</button>
    </div>`,
    methods: {
      btnClick() {
        // 调用父亲传递给我的函数
        this.$emit('yy', this.jx)
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    methods: {
      callback (v) {
        console.log(v)
      }
    }
  })
</script>

3.非父子组件的通信:

非父子通信事件总线非父子包含兄弟但不局限兄弟,先创建一个事件总线
发布消息通过事件总线发布
接受消息通过事件总线接受

<body>
  <div id="app">
    <man></man>
    <hr>
    <women></women>
  </div>
</body>
<script>
  // 创建一个事件总线
  var bus = new Vue()
  // 定义组件
  Vue.component('man', {
    template: `<div>
      <h2>我是男孩</h2>
      <button @click="sendFriend">给情书</button>
    </div>`,
    methods: {
      sendFriend () {
        // 发布消息 通过bus发布
        bus.$emit('yy', '我喜欢你')
      }
    }
  })
  Vue.component('women', {
    data() {
      return {
        msg: ''
      }
    },
    template: `<div>
      <h2>收到情书啦--{{msg}}</h2>
    </div>`,
    created() {
      // 越早越好 当然mounted ... 后面阶段也可以
      // 接受消息 通过bus接受
      bus.$on('yy', (v) => {
        this.msg = v
      })
    }
  })
  var vm = new Vue({
    el: '#app',
    methods: {
      callback (v) {
        console.log(v)
      }
    }
  })

4.跨代通信:

跨代传值 provie inject
祖代：通过provide给后代写遗嘱
后代：通过inject接受

<body>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>
<script>
  Vue.component('parent', {
    template: `<div>
      <h2>parent组件</h2>
      <child></child>
    </div>`
  })
  Vue.component('child', {
    inject: ['yizhu'],
    template: `<div>
      <h2>child组件--{{yizhu}}</h2>
      <son></son>
    </div>`
  })
  Vue.component('son', {
    // inject用法和props类似可以是一个数组也可以是对象
    inject: ['yizhu'],
    template: `<div>
      <h2>son组件--{{yizhu}}</h2>
    </div>`
  })
  var vm = new Vue({
    el: '#app',
    data: {
      money: '一个亿'
    },
    provide () {
      return {
      // 类似于data 组件中也是一个函数
      // 通过provide给后代写遗嘱
        yizhu: this.money
      }
    }
  })
</script>

5.通信:$ $p a r e n t 和$ children和$root:

$parent一层层找
$root根组件
$children一层一层往下找
但是这几种比较浪费,因为我们只想获取里面的数据,但是这个是将整个组件都获取了.

 <body>
    <div id="app">
      <parent></parent>
    </div>
  </body>
</html>
<script>
  Vue.component('parent', {
    template: `<div>
      <h2>parent组件</h2>
      <child></child>
    </div>`
  })
  Vue.component('child', {
    data () {
      return {
        sfq: '我是child的私房钱'
      }
    },
    template: `<div>
      <h2>child组件</h2>
      <son></son>
      </hr>
    </div>`
  })
  Vue.component('son', {
    data () {
      return {
        sondata: '我是son的数据'
      }
    },
    template: `<div>
      <h2>son组件</h2>
      <button @click="getVmData">获取vm上的money</button>
    </div>`,
    methods: {
      getVmData () {
        // console.log(this.$parent.$parent.$parent) // 找父组件 父组件上的所有的属性我都可以获取到了
        console.log(this.$parent.$parent.$parent.money) // 找父组件 父组件上的所有的属性我都可以获取到了
        console.log(this.$root.money) // 找父组件 父组件上的所有的属性我都可以获取到了
      }
    },
  })
  var vm = new Vue({
    el: '#app',
    data: {
      money: '2个亿'
    },
    mounted() {
      // 时机无所谓 你在点击事件也可以
      console.log(this.$children[0].$children[0].$children[0].sondata, 'vm组件mounted')
    }
  })
</script>

weixin_43817169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的组件间通信

vue组件通信的几种方法1.父向子传值:父亲：通过属性给子组件传值;儿子：通过props接受值<body> <div id="app"> <child ff="直接赋值" :father="msg"></child> </div></body><script> Vue.compone...
复制链接

扫一扫