vue兄弟间传值、多层间传值

vue兄弟间传值、多层间传值:总线机制借用prototype还有$on

总线机制借用prototype还有$on

示例:


<body>
  <div id="app">
    <zujian1 content="Dell"></zujian1>
    <zujian1 content="Less"></zujian1>
  </div>
</body>
<script>
  Vue.prototype.bus = new Vue(); //给每一个VUE实例都绑定一个原型BUS属性,并且bus里面的值就是vue实例

  let zujian1 = {
    props: {
      content: {
        type: String
      }
    },
    data() {
      return {
        content2: this.content
      }
    },
    template: '<div @click="change">{{content2}}</div>',
    methods: {
      change() {
        this.bus.$emit("change", this.content2);
      }
    },
    mounted: function() {
      let _this = this; //作用域发生了变化
      this.bus.$on('change', function(res) { //挂载的时候监听变化
        _this.content2 = res
      })
    }
  }
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!"
    },
    components: {
      zujian1
    }
  })
  console.log(app);
</script>
  • 发表于 2020-09-19 11:51
  • 阅读 ( 18 )
  • 分类:前端开发

0 条评论

请先 登录 后评论
库库巴
库库巴

56 篇文章

作家榜 »

  1. 库库巴 56 文章
  2. 素质教育的漏网之鱼 39 文章
  3. 特效搬运工 31 文章
  4. 噢嚯 3 文章
  5. admin 1 文章
  6. 手机用户7182 0 文章
  7. Axizs 0 文章
  8. 哄哄 0 文章