Vue子组件与父组件之间的通信(附代码)

php是最好的语言
Lepaskan: 2018-08-06 15:54:26
asal
1883 orang telah melayarinya

1.环境搭建

  • 下载 vue-cli:npm install -g vue-cli

  • 初始化项目:vue init webpack vue-demo

  • 进入vue-demo文件夹:cd vue-demo

  • 下载安装依赖:npm install

  • 运行该项目:npm run dev

2.父组件向子组件传值

  • src/components/文件夹下建一个组件,Home.vue

  • 创建子组件,在src/components/文件夹下新建一个文件夹,在新建文件夹中新建一个组件Child.vue

在Child.vue中创建props,用于接收父组件传递的值

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array
    }
}
</script>

<style  scoped>
    
</style>
Salin selepas log masuk

在Home.vue中注册Child组件,并在template的p标签中添加home-child标签,标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。

<template>
  <p class="hello">
    <home-child v-bind:c="c"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>
Salin selepas log masuk

结果
1.png

3.子组件向父组件传值

给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件,并传递一个参数,这个参数就是子组件要传递给父组件的值。

<template>
    <p>
        <p v-for="(item,key) of c" :key="key">
           {{key}}: {{item}}
        </p>
        <button v-on:click="ChildClick">点击向父组件传值</button>
        <span>{{data}}</span>
    </p>
</template>

<script>
export default {
    name: &#39;child&#39;,
    props: {
        c: Array,
        data: String
    },
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

<style  scoped>

</style>
Salin selepas log masuk

在父组件中的home-child标签中监听该自定义事件,并添加一个响应该事件的方法ShowChild。

<template>
  <p class="hello">
    <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child>
  </p>
</template>

<script>
import HomeChild from &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3],
      data: " "
    }
  },
  methods: {
    ShowChild: function (data) {
      this.data = data
      console.log("data:" + data)
    }
  }
}
</script>

<style scoped>

</style>
Salin selepas log masuk

结果:
1.png

点击按钮后:
1.png

相关文章:
实例详解vue组件间通信子与父详解(二)

vue子组件与父组件通信详解

Atas ialah kandungan terperinci Vue子组件与父组件之间的通信(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!