精华内容
下载资源
问答
  • 2021-12-03 09:04:48

    一、常用的父和子传参

    父传子

    父组件

    // 父组件里的子组件
    <LesseeDialog ref="lesseeDialog" :paramsObj="defaultProps" @dialogDetermine="whichDetermine"></LesseeDialog>
    // 引入子组件
    import LesseeDialog from './component/lesseeDialog.vue';
    export default {
        components: { LesseeDialog },
        data() {
            // 弹窗默认传参
            defaultProps: {}
        }
    }
        // 父组件操作子组件的事件
        handleLessee(value, whichLessee='') {
          switch (value) {
            case 'create':
                // 给传给子组件的参数对象赋值
              this.defaultProps = {
                title: '创建租户',
                index: '',
                id: '',
                name: '',
                person: '',
                text: ''
              };
              break;
            default:
              break;
          }
           // 让子组件显示
          this.$refs.lesseeDialog.dialogVisible = true;
        },

    子组件

    export default {
      props:{
        // 接收父组件传过来的参数
        paramsObj:{
          type: Object,
          default:() => {}
        }
      },
    },

    要用数据的话就直接paramsObj.xxx就行了

    子传父

    子组件

    this.$emit('事件名', 参数);

    this.$emit('dialogDetermine', this.paramsObj);

    父组件

    在父组件中的子组件部分@事件名="事件",事件名是子组件emit里的事件名,事件就是父组件里的一个事件

    <LesseeDialog ref="lesseeDialog" :paramsObj="defaultProps" @dialogDetermine="whichDetermine"></LesseeDialog>

    更多相关内容
  • Vue 父子组件传参

    2022-02-15 01:29:17
    父传子: 用属性props 向下传递 ; 字传父: 利用事件向上传递 ,父组件监听这个事件 子->父 父需要监听cry这个事件 然后用f2(data){ } data就是传递的参数

    父传子: 用属性props 向下传递 ;  
    字传父: 利用事件向上传递 ,父组件监听这个事件

    子->父 父需要监听cry这个事件 然后用f2(data){ } data就是传递的参数

    展开全文
  • vue 父子组件传参

    千次阅读 2022-03-27 20:14:50
    vue 父子组件传参

    1.父传子

    父组件里面获取的一些属性,子组件也想使用。

    父组件在使用子组件是给调用的子组件设置字段并把要传的值赋值过去

    <template>
      <div>
        <!-- 这里是父组件 -->
        <h1>这里是父组件</h1>
        <B :msg="msgs" :arr="items"></B>
      </div>
    </template>
    
    <script>
    import B from './B.vue'
      export default {
      components: { B },
        data() {
          return {
            msgs:'父组件的内容被子组件调用',
            items:[
              {id:1,name:'语文'},
              {id:2,name:'数学'},
              {id:3,name:'生物'},
              {id:4,name:'化学'}
            ]
          }
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

    这里的子组件在data里面定义props来接受传过来的值

    拿到的数据,可以直接遍历展示

    <template>
      <div>
        <!-- 这里是子组件 -->
        <h1>这里是子组件</h1>
        <h3>{{msg}}</h3>
        <h3 v-for="item in arr" :key="item.id">
          {{item.id}},,,,{{item.name}}
        </h3>
      </div>
    </template>
    
    <script>
      export default {
        props:['msg',"arr"],
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

     2.子传父

    子传父就是子组件的方法或者是一些数据父组件想要使用

    先说数据如何传递。这里子组件要使用$emit来传递,并且传递过去的方法名字要跟调用子组件时用的方法名字一致 这里的是showname。

    <template>
      <div>
       <!-- 这里是父组件 -->
       <h1>这里是父组件</h1>
       <h3>你叫什么??</h3>
       <h3>{{this.name}}</h3>
       <!-- 引用子组件 -->
        <B @showname='showname'/>
      </div>
    </template>
    
    <script>
    import B from './B.vue'
      export default {
      components: { B },
      data() {
        return {
          name:''
        }
      },
        methods: {
          showname(newval) {
            console.log(newval);
            this.name = newval
          }
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>
    <template>
      <div>
        <!-- 这里是子组件 -->
        <h1>这里是子组件</h1>
        <button @click="go">点击传递</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            name: '小明'
          }
        },
        methods: {
          go() {
            this.$emit('showname',this.name)
          }
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

    接下来就是方法,也就是在父组件使用子组件的方法

    先在子组件里面定义一个方法 这里用到了vant组件库的Toast轻提示

    https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast

    <template>
      <div>
        <!-- 这里是子组件 -->
        <h1>这里是子组件</h1>
      </div>
    </template>
    
    <script>
    import { Toast } from 'vant';
      export default {
        data() {
          return {
          }
        },
        methods: {
          // 这里用了vant组件的Toast提示
          loading() {
            Toast.loading({
              message: '加载中...',
              forbidClick: true,
            });
          },
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

    然后在父组件调用子组件的方法

    注意ref定义的值要和下面方法里面$refs后面的一样

    <template>
      <div>
       <!-- 这里是父组件 -->
       <h1>这里是父组件</h1>
       <!-- 点击调用子组件的loading方法 -->
       <button @click="showloading">父组件点击</button>
       <B ref="loading"/>
      </div>
    </template>
    
    <script>
    import B from './B.vue'
      export default {
      components: { B },
        methods: {
          showloading(){
            this.$refs.loading.loading()
          }
        },
      }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

     

    展开全文
  • Vue父子组件传参

    2022-03-21 10:00:01
    1、父传子 父组件自定义个title属性,绑定要传递的值,子组件通过一个props实例把父组件传递的值获取就可以渲染了。 <template> <...import con from '../components/componts.vue' export

    1、父传子

    父组件自定义个title属性,绑定要传递的值,子组件通过一个props实例把父组件传递的值获取就可以渲染了。

    <template>
      <div>
          <p>父组件</p>
          <con :title="hello"/>
      </div>
    </template>
    
    <script>
    import con from '../components/componts.vue'
    export default {
        name:'login',
        data(){
            return{
                hello:"你的父亲组件"
            }
        },
        components:{
            con
        }
    }
    </script>
    

    子组件

    <template>
      <div class="hello">
          {{title}}
      </div>
    </template>
    
    <script>
    export default {
      name: 'Compont',
      data(){
          return{}
      },
      props:{
          title:String
      }
    }
    </script>
    

    注:子组件接受父组件传递过来的是可以定义变量的类型,不是符合类型就不接收

    2、子传父

    子组件通过点击事件,在点击事件里面自定义个事件
    this.$emit(“getdata”,this.test)然后传递给父组件,
    父组件接受这个子组件自定义的事件,这个事件有个里面的返回值就是传递过来的数据
    <con @getdata=“getdata”/>
    子组件

    <template>
      <div class="hello">
          <button @click="opee">子传父</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Compont',
      data(){
          return{
            test:"我是儿孩子组件"
          }
      },
      methods:{
          opee:function(){
              this.$emit("getdata",this.test)
          }
      },
    }
    </script>
    

    父组件

    <template>
      <div>
          <p>父组件</p>
          {{msg}}
          <con @getdata="getdata"/>
      </div>
    </template>
    
    <script>
    import con from '../components/componts.vue'
    export default {
        name:'login',
        data(){
            return{ 
                msg:"父组件本来的值"
            }
        },
        methods:{
            getdata(e){
                this.msg=e
                console,log(e)
            }
        },
        components:{
            con
        }
    }
    </script>
    
    展开全文
  • vue父子组件传参的4种方式

    千次阅读 2021-01-05 18:40:29
    父组件向子组件传参 父组件直接绑定在子组件的标签上,子组件通过props接收传递过来的参数。 父组件 <template> <i-activities-item :content="content" /> </template> <script> ...
  • Vue父子组件传参的方式:props

    千次阅读 2022-04-22 13:19:34
    Vue父子组件传参的方式:propsprops props 在Vue中我们可以通过props来进行父子之间的传参 比如我们有A,B两个组件, A是B的父组件, B组件想用A组件里面的数据可以通过如下的方式: <!-- 父组件 --> <template...
  • 1、父组件向子组件传参 父组件向子组件共享数据需要使用自定义属性 // 父组件 <template> <div> // 使用子组件 <son :msg="message" :userInfo="userInfo"></son> </div> <...
  • vue 父子组件传参&插槽简单使用 ###为什么要使用组件? 1.若多个页面都使用同一套模板渲染内容,那么就很有必要来封装一个公共组件来渲染; 2.尽管多个页面看起来是相似的,样式上可能会有细微的差别,那么我们...
  • 一、父子组件传参数是通过属性props来实现的,需要在子组件内定义一个属性来接收父组件传过来的值;父组件要做的是双向绑定一个参数、给参数赋值。实例: 先上图 子组件: 1.要用brainstormData属性,此时属性...
  • VUE 父子组件传递

    2019-02-23 10:08:39
    HTML编码中,利用了Vue框架,在该框架下父子组件直接经常需要进行数据传递
  • EventBus又称为事件总线,可以使用它来进行组件之间通信。其实和vuex还是有些类似的,相当于所有组件共用一个事件中心,这个事件中心用来管理事件,当...通过共享一个vue实例,使用该实例的$on以及$emit实现数据传递。
  • 父子组件传递参数,使用props <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
  • 后端用的是django的paginator分页模块 分页流程 嵌套组件,分页组件注册...当调用上一页下一页函数时,当前页数计算过后,通过$emit传给父组件,在下面的例子中调用了chane_page_num映射函数,父组件函数请求当前页...
  • vue组件之间传参和传方法
  • vue父子组件传参之ref

    2018-12-27 12:40:00
    vue中,传参的常用的就父子组件传参,兄弟组件传参。今天我们说的是父子组件传参中的一种方式$ref和ref 首先我们创建一个子组件 并给他添加一个number的值和绑定一个点击事件@click='add()',每次点击加1 ...
  • Vue3父子组件传参

    2022-04-30 19:24:23
    1.非语法糖能直接在setup里添加两个参数props和ctx里的emit传参 具体语法:setup(props,ctx) 1.之后使用可以通过props.xxx(xxx为父组件传递过来的属性名)进行数据的使用 2.ctx:可以直接解构赋值将emit解构出来...
  • vue3.0父子组件传参

    2022-02-11 11:15:03
    export default { props: ["mess"], //需要props声明才能在setup收到参数 setup(props) { console.log(props.mess); }, }; export default { emits: ["xd"], //需要emits声明... context.emit("xd", "子组件的值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,143
精华内容 2,457
关键字:

vue父子组件传参