vue父组件传值给子组件

一、父传子

方式一

父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收

父组件

<template>
    <div id="container">
        <Child :msg="data"></Child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
      data: "父组件的值"
    };
  },
  methods: {
  },
  components: {
    Child
  }
};
</script>

子组件

<template>
    <div id="container">
        <h1>{{msg}}</h1>
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props:["msg"]
};
</script>

方式二

父组件触发子组件的方法,主要通过$refs来触发,同时传参

父组件

<template>
    <div id="container">
    <h1 @click="getData">点击将触发子组件方法,并把参数传给子组件</h1>
      <child ref="mychild"></child>
    </div>
</template>
<script>
import Child from "@/components/Child";
export default {
  data() {
    return {
        name: ‘‘,
        age: ‘‘
    };
  },

  components: {
    Child
  }

  methods: {
  getData(){
    //触发子组件方法,并传参
        this.$refs.mychild.init("chrchr","120");
  }
  
  },

};
</script>

子组件

<template>
    <div id="container">
        <h1>{{name}}</h1>
        <h1>{{age}}</h1>
    </div>
</template>
<script>
export default {

  props:["msg"],

  data() {
    return {
        name: ‘‘,
        age: ‘‘
    };
  },

  mounted:{

  },
  method:{
    //父组件触发子组件的init方法
    init(name,age){
        this.name = name;
        this.age = age;
    }
  }
};
</script>

原文地址:https://www.cnblogs.com/caohanren/p/11981066.html

时间: 2024-10-29 13:58:35

vue父组件传值给子组件的相关文章

【转】Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父组件监听消息 分发内容 整个博客使用的源代码-请点击 所以将用三篇博客分别进行介绍以上三种情况和使用 Vue的设计者对组件的理解 Vue的设计者,对组件和父组件之间的关系流上做了阐述,即单向数据流图:父组件向子组件传递数据,子组件回馈事件 组件意味着协同工作,通常父子组件会是这样的关系:组件 A

Vue 父组件传值到子组件

vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接  msg="xxx"就好 这里动态取值的话就  :msg=xxxxx _________________________________华丽的分割线___________________________________ 子组件接收 好了就这样可以直接用了 原文地址:https://www.cnblogs.com/powerbyming/p/9130043.html

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变化了,通过查阅资料,发现 是 VUE 双向绑定中的一个bug,就此给出解决办法,亲测有效 情景描述: 对象  data = { price: 0, flag: true, name: " 哈哈 " } 父组件 更改 data.parice = 100,   然后将 data对象 传给子组件

vue 通过props向子组件传值,子组件无法取得该值

问题描述:我把弹出框设计成了子组件,弹出框里的数据由父组件通过ajax异步获取后传给子组件(用props属性).然而,当我想在子组件的生命周期里取得该值时,该值并未获得. 问题分析:这应该是当子组件实例化之后,ajax才获取数据导致. 问题解决:用v-if来判断子组件是否渲染. 代码: 父组件: <template> <div class="logistics-control"> <!-- 添加单路径弹框 --> <toast :config=

【vue开发】 父组件传值给子组件时 ,watch props 监听不到解决方案

解决方案: watch:{ data:{ immediate:true, handler:function(){ } }} 示例:   原文地址:https://www.cnblogs.com/xiaohuizhang/p/11393444.html

vue系列(一)子组件和父组件

父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top"> <span :class="{action:ind===index}" v-for="(item,index) in lanMenu" v-on:click="clickMenu(index,item.con)">{{ite

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

vue 父组件如何给子组件的组件传值 provide inject

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

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja