vue父子组件通信

最新推荐文章于 2023-07-11 20:36:45 发布

uglyduckling0412

最新推荐文章于 2023-07-11 20:36:45 发布

阅读量176

点赞数

分类专栏：技术档案文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/uglyduckling0412/article/details/126420586

版权

技术档案专栏收录该内容

38 篇文章 1 订阅

订阅专栏

使用场景：父组件获取子组件的数据，并且可以更改子组件数据

HTML

<body>
  <!-- 父传子 props  属性子传父 $emit  方法-->
  <!-- 霸道方法 父拿子数据 ref -->
  <div id="app">
    <div class="titSty">{{title}}</div>
    <button @click="putChildData">获取子组件数据</button>
    <my-component :name="myname" @changeevent="handleEvent" ref="childData"></my-component>
  </div>
</body>

JS

<script>
  Vue.component('myComponent', {
    template: `
      <div id="myCom" style="background-color:yellow;width:200px;height:50px">
        {{name}}
        <input v-model="emitText" @change="handleChange"/>
      </div>
    `,
    data() {
      return {
        emitText: '娃哈哈'
      }
    },
    props: ['name'],
    methods: {
      handleChange() {
        this.$emit('changeevent', this.emitText)
      }
    }
  })
  const vm = new Vue({
    el: '#app',
    data: {
      myname: '张三',
      title: '我是父组件'
    },
    methods: {
      handleEvent(data) {
        console.log(data)
      },
      putChildData() {
        this.$refs.childData.emitText = "通过父组件控制子组件数据"
        // console.log(this.$refs.childData.emitText);
      }
    }
  });
</script>