vue子组件如何获取父组件的内容(props属性)

目录
  • 子组件如何获取父组件的内容
    • props属性
  • vue父→子组件的props传值
    • 需求1
    • 需求2

子组件如何获取父组件的内容

props属性

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

想要引用父组件需要：

<bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上
bbb:{
    props：{
        'myMsg':String  //绑定数据的类型
    }
}

注：props也可表达成如下：props：['myMsg']

完整实例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="example">
    <aaa></aaa>
</div>
<template id="aaa">
    <h1>{{msg}}</h1>       //父组件
    <bbb :my-msg="msg"></bbb> //子组件
</template>
<script>
    window.onload=function(){
        new Vue({
            el: '#example',
                 data:{
                     },
            components:{
                aaa:{
                    data:function(){
                        return{
                            msg:'我是父组件的数据'
                        }
                     },
                    template:'#aaa',
                    components:{
                        bbb:{
                            props:{
                                'myMsg':String
                            },
                            template:'<h2>我是子组件-->{{myMsg}}</h2>'
                        }//当html中使用my-msg时，在js中需使用驼峰命名myMsg
                    }
                }
            }
    })
    }
</script>
</body>
</html>

最后的结果如下图：

vue父→子组件的props传值

需求1

如果要将自定义属性里的值传递给模板,可以使用props属性:

写法注意的地方:

1.props的大小写:对于html里的短横线命名,在vue里面要用小驼峰命名法(大驼峰命名介绍:第一个字母也是大写);

2.template里必须有一个根目录:

需求2

实际项目中我们经常要将data里面的值传递给模板,操作如下:

思路:使用v-bind和data数据绑定,将值传递到组件的模板里的插值里.

另一个案例:

效果图:

传递的过程总结:准备一个大的组件(在vue实例里)和一个子组件son,在son子组件里使用v-bind绑定要传递的message属性,message属性值是对应父组件里的data值,然后在son子组件component方法的第二个参数的对象里增加一个props属性(重点是这个props属性,它是用来接收父组件的值的),值是数组,里面就填字符串形式的message,最后直接在子组件的模板里用插值的方式使用这个message就可以了.

同时,也要了解子组件同步修改父子组件的值,操作如下:

子组件修改父子组件值的操作过程:

在子组件里定义一个修改的方法,在方法里添加this.$emit()方法,它有两个参数,第一个是自定义事件名,第二个是要修改的值,接着在父组件里用v-on添加这个自定义事件,值写父组件方法,在这个方法里用(美元event)作为参数,在父组件方法里接收并操作自己要修改的逻辑操作即可.

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解VUE里子组件如何获取父组件动态变化的值

    在VUE里父组件给子组件间使用props方式传递数据,但是希望父组件的一个状态值改变然后子组件也能监听到这个数据的改变来更新子组件的状态. 场景:子组件通过props获取父组件传过来的数据,子组件存在操作传过来的数据并且传递给父组件. 比如想实现一个switch开关按钮的公用组件: 1.父组件可以向按钮组件传递默认值. 2.子组件的操作可以改变父组件的数据. 3.父组件修改传递给子组件的值,子组件能动态监听到改变. 比如父组件点击重置,开关组件的状态恢复为关闭状态: 方法1: 1.因为存在子组件

  • vue中子组件的methods中获取到props中的值方法

    父子组件通信 这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可 例如: 父组件中 <template> <div> <head-top></head-top> <section class="data_section"> <header class="chart-title">数据统计</header> <el-row :gutter=&

  • vue实现父组件获取子组件的方法或属性值详解

    目录 父组件获取子组件方法或属性值 这里主要使用了vue的$ref 父组件获取子组件中的变量 案例一:点击父组件的按钮,操作子组件显示 案列二:获取子组件data中的变量 父组件获取子组件方法或属性值 vue的本质就是每一块只负责自己这一块的工作,这样更容易维护. 这里主要使用了vue的$ref 当用在一般的标签上时,主要功能是获取dom节点,进行一些dom的操作. 当使用在子组件上,可以用来获取子组件的属性. 那么下面我们要实现的就是如何在父组件上使用子组件的方法 目标:我需要实现一个在父组件

  • vue 组件间的通信之子组件向父组件传值的方式

    父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件data中的name属性: 在<com-b :name="name"></com-b> 使用v-bind 绑定name属性,红色部分为属性名称,可以随意写. 在子组件定义部分里添加选项,值是个字符串数组 props:['name'],将上边红色的属性名称写在这里: 之后就

  • vue.js 子组件无法获取父组件store值的解决方式

    子组件: props:['myDetail'] 父组件: <子组件 :myDetail="detail"></子组件> computed:{ detail(){ return this.$store.state.XXXX.yyyy } } 子组件的参数值不会随着父组件store中参数值的改变而改变 修改为 父组件: data:{ detail:{} } methods:{ reloadDetail(){ this.detail=JSON.parse(JSON.s

  • vue子组件如何获取父组件的内容(props属性)

    vue子组件如何获取父组件的内容(props属性)

    目录 子组件如何获取父组件的内容 props属性 vue父→子组件的props传值 需求1 需求2 子组件如何获取父组件的内容 props属性 组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 想要引用父组件需要: <bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{     props:{         'myMs

  • vue slot 在子组件中显示父组件传递的模板

    父组件使用没有指定slot属性,默认为default 在slot中可以使用默认值,如果父组件没有传递对应的slot,则会显示默认值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body&

  • Vue子组件监听父组件值的变化

    目录 子组件监听父组件值变化 子组件监听父组件的值同步更新数据 子组件监听父组件值变化 子组件中利用watch监听父组件值的变化 // 子组件 props: ["a"],     watch: {         a(oldValue, newValue) {             // oldValue  a旧值             // newValue a新值         }     } 子组件监听父组件的值同步更新数据 子组件 props : ["data&

  • Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • VUEJS 2.0 子组件访问/调用父组件的实例

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.jb51.net/article/139218.htm 讲到了如何实现一个vue对话框组件,其中涉及到了父组件和子组件的通信,这个不用多说,看我之前的文章就能明白,文章最后也说到了,我们可以使用slot插槽来编写组件,slot用来分发内容到子组件中,从而实现组件的高度复用,编写的组件更加灵活. 还是结合对话框的例子,使用slot来实现对话框组件 注册一个名叫dialog-tip的全局组件 Vue.compone

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • angular5 子组件监听父组件传入值的变化方法

    项目中遇到一个问题,就是在ngInit()中调用方法,只调用一次的问题,当父组件传值变化时,并不会再次执行. import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; import { NavController } from 'ionic-angular'; @Component({ selector: 'cs-img-lazy', templateUrl: 'cs-img-lazy.html' })

随机推荐