美文网首页
vue 组件传值

vue 组件传值

作者: sunflower_07 | 来源:发表于2019-05-17 16:39 被阅读0次
  1. 父组件传值给子组件
  2. 父组件传值子组件实时改变
    3.子组件和父组件通讯
    直接看代码:
//父组件代码
<template>
    <div>
        <div v-if="!show1">
            父组件
            <button @click="show1 = !show1">点击显示子组件</button>
        </div>
        <!-- 子组件 -->
        <list v-if="show1"  v-on:myCancel="show1 = !show1" 
            :show="show1" :testData.sync="sonData"></list>
    </div>
</template>
<script>
import list from './list'
export default {
    components:{
        list
    },
    data(){
        return {
            sonData:{name:'子组件'},
            show1:false
        };
    },
    methods:{}
}
</script>
<style lang="less">
</style>
子组件代码
<template>
  <div class="orgContent-out" v-if="show">
    我是{{testData.name}}
    <button @click="cancel">关闭子组件,显示父组件</button>
  </div>
</template>
<script>
export default {
  name: "list",
  props: {
    testData: {
     type: Object,
      default(){
        return {}
      }
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  methods: {
    cancel() {
      this.$emit("myCancel", "取消");
    }
  },
};
</script>
<style lang="less">
</style>

结果:


点击前
点击后
子组件关闭后

完成啦,喜欢就留个❤❤吧

相关文章

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • Vue 父组件向子组件传值

    Vue 父组件向子组件传值 demo代码 (vue.js ...

网友评论

      本文标题:vue 组件传值

      本文链接:https://www.haomeiwen.com/subject/jtyoaqtx.html