vue子组件如何使用父组件传过来的值

目录
  • 子组件使用父组件传过来的值
    • 父组件
    • 子组件
  • vue子组件调用父组件数据

子组件使用父组件传过来的值

父组件

<alarmstatistics :roless.sync="role"></alarmstatistics>
  import alarmstatistics from "./alarmstatistics.vue";
  components: {
    alarmstatistics,
  },

子组件

  props: ["roless"],
  
  data() {
    return {
      role:this.roless,
  },
  
  mounted() {
    if(this.role==3){
      this.chartY = "9.5%";
    }else{
      this.chartY = "18%";
    }
  },

如果是使用父组件接口返回来的值，在html中直接使用

  props: ["infoDatac"],
      <li
        v-for="(item,i) in infoDatac.notice.admitted"
        :key="'A'+ i"
      >
        <div>申请单号：{{ item.applyCode }}</div>
        <div>使用时间：{{ item.useTime }}</div>
        <span>{{ item.title }}</span>
      </li>

vue子组件调用父组件数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="" id="myVue">
            <my-component>
            </my-component>
        </div>
        <!--子组件-->
        <template id="child"  >
            <div id="">
                <div @click='changedata'>子组件：{{data}}</div>
            </div>
        </template>
        <!--父组件-->
        <template id="father">
            <div>
                <mycomponent-child v-bind:data="str"></mycomponent-child>
            </div>
        </template>
    </body>
    <script type="text/javascript" charset="utf-8">
        /*在父组件中的数据str，
         * 将父组件的数据绑定到子组件的属性data上
         * 然后在子组件中就可以通过props接收到，
         * 这样在子组件中就可以使用变量 this.data1访问到 父组件的 str1对应的值了。
         */
        //当点击子组件，触发子组件的changedata方法，通过this.data = "父组件值被子组件修改了";改变了父级的str的值
        //通过  this.$parent.fn()访问父组件的方法fn()。
        var child={
            props:["data"],
            template:"#child",
            data:function(){
                return{
                    str:"我是子组件数据"
                }
            },
            methods:{
                changedata:function(){
                    this.data = "父组件值被子组件修改了";
                    this.$parent.fn();
                }
           }
        }

        /*父组件*/
        var father={
            template:"#father",
            data:function(){
                return{
                    str:"我是父组件数据"
                }
            },
            methods:{
                fn:function(){
                    alert("我是父组件方法")
                }
            },
            components:{
                "mycomponentChild":child
            }
        }

        vm=new Vue({
            //el:"#myVue",
            components:{
                "myComponent":father
            }
        }).$mount('#myVue');

    </script>
</html>

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

赞 (0)

相关推荐

  • VUE子组件向父组件传值详解（含传多值及添加额外参数场景）

    一.子组件向父组件传递一个值 子组件: this.$emit('change', this.value); 父组件: <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChang

  • vue 子组件和父组件传值的示例

    一.子组件向父组件传值 1:子组件中(例:) 2:父组件中(例:) 二.父组件向子组件传值 1:父组件中(例:) 2:子组件中(例:) 以上就是vue 子组件和父组件传值的示例的详细内容,更多关于vue 子组件和父组件传值的资料请关注我们其它相关文章!

  • Vue父组件向子组件传值以及data和props的区别详解

    1.在父组件中定义 msg 属性 data:{ msg:'123 -我是父组件中的数据' }, 2.引用子组件 父组件可以在引用子组件的时候,通过属性绑定的形式,把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用. 把父组件传递过来的 msg 属性,绑定到子组件的 parentmsg 属性上. <com1 :parentmsg="msg"></com1> 3. 在子组件定义部分,需要把父组件传递过来的 parentmsg 属性,先在pro

  • 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子组件接收父组件传值的3种方式

    目录 1.简单声明接收 2.接收数据的同时进行 类型限制 3.接收数据的同时对 数据类型.必要性.默认值 进行限制 父组件代码↓ <template>     <div>         <div>父组件</div>         <Student :name="name" :age="age"></Student>     </div> </template> <

  • vue父组件给子组件的组件传值provide inject的方法

    一般情况下我们父子之间的传值用的是props,这个就不多说了,但是如果想让父给子组件的组件传值怎么办呢,这里我们就可以用到 provide 和 inject(依赖注入) provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值 具体的可以看官网介绍provide/inject:https://cn.vuejs.org/v2/api/#provide-inject 下面我们可以写个简单的例子来演示一下

  • 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子组件props从父组件接收数据并存入data

    Vue子组件props从父组件接收数据并存入data

    目录 1.不允许直接修改 2.存在异步的情况 解决思路 经过测试父组件中传递过来的数据有以下特点: 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜,我父组件的瓜岂是你能变的,父组件重新渲染时,这个值会被覆盖,你小子自个儿用计算属性或者data存一下吧 2.存在异步的情况 假如父组件该数据是后台接口获取的数据,那么会产生这种情况.子组件的生命周期都已经走完了,父组件的数据还没传过来.因为V8引擎的运行速度是

  • 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

  • vue3子组件如何修改父组件传过来的props数据

    目录 前言 1. 修改父组件普通数据 2. 修改父组件复杂数据(对象) 最后 前言 最近新项目用vue3搭建的,准备开始使用vue3的语法,从这篇开始记录下vue3遇到的一些问题和一些语法的使用方法,以便于以后复习,也可能帮助到一些小伙伴. 1. 修改父组件普通数据 使用v-mode语法,代替了vue2.x的.sync修饰符 父组件用ref() 定义一个普通数据为响应式变量,例 var test = ref(‘parent’) 父组件用v-mode将数据绑定到子组件上 <ChildCompone

  • 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里子组件如何获取父组件动态变化的值

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

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

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

随机推荐