首页 IT程序员内容详情

vue-cli3父子组件传值

2021-08-23 30660 编程艺术家

通常父子组件之间是需要相互传数据的。

父组件向子组件传数据

1,父组件App.vue传递数据menu: 'aa'给子组件的ret

复制代码

<template>
  <div id="app">    <Vcontent v-bind:ret="menu"></Vcontent>  <! -- 使用v-bind为子组件绑定数据 -->
  </div>
</template>

<script>import Vcontent from "./components/Vcontent.vue"export default {
  name: 'App',
  data(){    return {      menu: 'aa'  // 父组件的数据menu
    }
  },
  components: {
    Vcontent
  }
}</script>

复制代码

2,子组件Vcontent.vue使用ret接受父组件传递的menu

复制代码

<template>
    <div class="content">
        <h1>{{cont}}</h1>
        <h1>{{ret}}</h1>  <! -- 展示父组件传递的数据 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){            return {
                cont: "Vcontent"
            }
        },        props: // 子组件接受父组件的数据,必须使用props选项声明它预期的数据
        {
            ret:
            {
                type: String,  // 这里指父组件传递的数据类型,父组件也必须传这个类型的数据                default: "ss"  // 没接收到父组件的数据,就使用默认数据
            }        }
    }</script>

复制代码

也可以这样接收父组件的数据

复制代码

<template>
    <div class="content">
        <h1>{{cont}}</h1>        <h1>{{rets}}</h1>  <! -- 这是使用rets接受数据 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){            return {
                cont: "Vcontent",                rets: this.ret  // 在这里接收this.ret
            }
        },        props: 
        {
            ret:  
            {
                type: String,                default: "ss"
            }
        }
    }</script>

复制代码

子组件向父组件传数据

子组件是通过事件向父组件传递数据,分如下两种情况:

情况一:当前子组件已接收了接收父组件的数据,存在this.menu数据

父组件App.vue

复制代码

<template>
  <div id="app">    <Vcontent v-bind:menu="menus"></Vcontent>  <!-- 正向子组件传递menus -->
  </div>
</template>

<script>import Vcontent from "./components/Vcontent.vue"export default {
  name: 'App',
  data(){    return {      menus: ["鱼香肉丝","鱼香茄子"]
    }
  },
  components: {    Vcontent
  }
}</script>

复制代码

子组件Vcontent.vue

复制代码

<template>
    <div class="content">        <ul>
            <li v-for="(item, index) in menus" v-bind:key="index">
                {{item}}
            </li>
        </ul>
        <button @click="addOneMenu">增加</button>  <! -- 子组件通过点击事件addOneMenu向this.menu也就是父组件的menus传递了一个值 -->
    </div>
</template>

<script>
    export default{
        name: "Vcontent",
        data(){            return {
                menus: this.menu  // this.menu就是父组件的menus
            }
        },        methods: {  // 通过点击事件触发addOenMenu函数
            addOneMenu(){                this.menu.push("红烧排骨")  // push一个数据
            }
        },
        props:{
            menu:
            {
                type: Array
            }
        }
    }</script>

复制代码

情况二:父组件没有向当前子组件传递数据,也就是拿不到this.menu数据,或则是不想通过this.menu传递数据

子组件Vcontent.vue,为了直观查看数据还使用Vcontent.vue

复制代码

<template>
    <div =>
        <ul>
            <li v-= v-bind:key=></li>
        </ul>
        <button @click=>增加</button>
    </div>
</template>

<script>.menu.push(</script>

复制代码

父组件App.vue

复制代码

<template>
  <div id="app">  <! -- 不要注意v-bind,为了直观看menus数据的变化 -->
    <Vcontent v-bind:menu="menus" @addMenu="addHandler"></Vcontent>
  </div>
</template>

<script>import Vcontent from "./components/Vcontent.vue"export default {
  name: 'App',
  data(){    return {
      menus: ["鱼香肉丝","鱼香茄子"]
    }
  },  methods: {  
    addHandler(val){  // 触发addHandler函数,val用来接收子组件传递的数据      this.menus.push(val)  // push数据
    }
  },
  components: {
    Vheader,
    Vcontent
  }
}</script>


转载于:https://www.cnblogs.com/aaronthon/p/12919410.html

相关标签: # vue

文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月 文字广告3/月
 暂无评论,快来抢沙发吧~

发布评论