vue父子组件传值

最新推荐文章于 2022-04-17 16:50:34 发布

G018_star sky♬

最新推荐文章于 2022-04-17 16:50:34 发布

阅读量76

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42526440/article/details/114405313

版权

vue.js 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

components文件夹下的helloSlot.vue

<template>
  <div>
      <h2>{{counter}}</h2>
  </div>
</template>

<script>
export default {
        name:'helloSlot',
        props:{
            counter:Number 
        }

}
</script>

<style>

</style>

APP.vue

<template>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{counter}}</h2>
        <button @click="counter++">+</button>
        <button @click="counter--">-</button>

<hello-slot :counter='counter'></hello-slot>
    </div>
</template>

<script>
import helloSlot from './components/helloSlot'
export default {
        name:'App',
        components:{
            helloSlot
        },
        data(){
            return {
                message:'我是APP组件',
                counter:0
            }
        }
}
</script>

<style>

</style>