组件通讯

最新推荐文章于 2024-06-26 09:51:10 发布

渡梵尘

最新推荐文章于 2024-06-26 09:51:10 发布

阅读量445

点赞数

本文链接：https://blog.csdn.net/lx_dfc/article/details/81316491

版权

组件是一个独立封闭的个体，不能直接使用外部的数据，组件可以为自己提供数据，通过 data（）{return{msg：'...'} }

父组件到子组件通过子组件 props: ['属性']

<body>
  <div id="app">
    <father class="father"></father>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  // :skill="msg"自定义属性绑定动态数据
  //子组件通过 props: ['skill']获取skill属性的值
  //创建父组件
  Vue.component('father', {
    data() {
      return {
        msg: '好好学习，天天向上',
      }
    },
    template: `
  <div>
    <p>父对子说:{{msg}}</p>
  
    <son class='son' :skill="msg"></son>
  </div>
  `
  })
  //创建子组件
  Vue.component('son', {
    template: `
  <div>
    <p>子听父说:{{skill}}</p>
  </div>
  `,
    props: ['skill']
  })
  //一个Vue实例
  var vm = new Vue({
    el: '#app',
    data: {
    }
  })
</script>

子组件到父组件 this.$emit('方法', '数据')

<body>
  <div id="app">
    <father class="father"></father>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  //创建父组件
  Vue.component('father', {
    data() {
      return {
        skill: ''
      }
    },
    template: `
  <div>
    <p>父听子说:{{skill}}</p>
  
    <son class='son' @fn='getSkill'></son>
  </div>
  `,
    methods: {
      // 父组件中提供一个方法
      getSkill(skill) {
        console.log(skill);
        // 参数skill就是子组件中传递过来的数据
        this.skill = skill
      }
    }
  })
  //创建子组件
  Vue.component('son', {
    data() {
      return {
        msg: '少喝酒，少抽烟，注意身体',
      }
    },
    template: `
  <div>
    <p>子对父说:{{msg}}</p>
  </div>
  `,
    created() {
      // 调用父组件中传递过来的方法，将数据作为参数传递
      // 第一个参数：表示要调用的方法名称
      // 第二个参数：表示传递父组件的数据
      this.$emit('fn', this.msg)
    }
  })
  //一个Vue实例
  var vm = new Vue({
    el: '#app',
    data: {
    }
  })
</script>

非父子组件之间的通讯非父子组件之间通过一个空Vue实例来传递数据：const bus = new Vue()

<body>
  <div id="app">
    <box1 class="box1"></box1>
    <box2 class="box2"></box2>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  // 非父子组件之间通过一个空Vue实例来传递数据：
  // bus 专业名称为：事件总线（公交车）
  const bus = new Vue()
  //创建组件
  Vue.component('box1', {
    data() {
      return {
        msg: 'I love you !!!'
      }
    },
    template: `
  <div>
    <p>这是box1组件,他说:{{ msg }}</p>
    <button @click='fn'>按钮</button>
  </div>
  `,
  methods:{
    fn() {
      //把数据传送到公共Vue实例上，参数一是bus的事件，参二是发出的数据
      bus.$emit('love', this.msg)
    }
  }
  })
  //创建组件
  Vue.component('box2', {
    data() {
      return {
        msg: ''
      }
    },
    template: `
  <div>
    <p>接受到box1的表白：{{ msg }}</p>
  </div>
  `,
    created() {
      //给bus注册事件，接收数据
      bus.$on('love', (data) => {
       console.log(data)
          this.msg = data
      })
    }
  })
  //一个Vue实例
  var vm = new Vue({
    el: '#app',
    data: {
    }
  })
</script>