父组件传值给孙组件

有一个组件A,包含了组件B,组件B包含了组件C,那么组件A就是父组件,组件B就是子组件,组件C就是孙组件。

$attrs可以把父组件的值传给孙组件

1.在引用的子组件里绑定要传的值

<template>
  <div id="app">
     <HelloWorld :test="hello"/>
  </div>
</template>

2.在引用的孙组件里用v-bind绑定$attrs

<child v-bind="$attrs"></child>

3.在孙组件里打印出this.$attrs,可以获取到父组件的数据

  mounted(){
    console.log(this.$attrs.test);
  this.cdata = this.$attrs.test
  }

完整例子:

App.vue  父组件

<template>
  <div id="app">
     <HelloWorld :test="hello"/>
  </div>
</template>

<script>
import HelloWorld from ‘./components/HelloWorld‘

export default {
  name: ‘App‘,
  components: {
    HelloWorld
  },
  data(){
    return {
      hello:"hello"
    }
  },
}
</script>

HelloWorld.vue子组件

<template>
<div>
  <child v-bind="$attrs"></child>
</div>
</template>
<script>
import Child from ‘../components/Child‘
export default {
  name: "HelloWorld",
  components:{
    Child
  },
  data () {
    return {
    };
  }
}
</script>

Child.vue 孙组件

<template>
<div>
  {{cdata}}
</div>
</template>
<script>
export default {
  name: "Child",
  data () {
    return {
      cdata:"孙组件"
    };
  },
  mounted(){
    console.log(this.$attrs.test);
  this.cdata = this.$attrs.test
  }
}
</script>

原文地址:https://www.cnblogs.com/luguankun/p/11708657.html

时间: 2024-11-03 19:00:45

父组件传值给孙组件的相关文章

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

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

Vue 父组件传值到子组件

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

创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `function`的形式在创建,并且该组件是无state状态的.具体的创建形式如下 1 import React from 'react '; 2 3 //定义一个React组件 4 function App() { 5 return ( 6 <div> 7 hello React... 8 </div

vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

### 什么是组件? 将代码进行复用 组件是实例的拓展子类 组件继承自实例,实例有的组件大部分都有,稍有变异 ### 组件创建 创建组件模板的2种方式: 1.通过template标签     template:"#tpl" 2.通过字符串模板   template:"<h1>吴启浪</h1>" ### 全局组件 所有的实例都可以使用 Vue.component("wql",{ template:"<h1&g

vue父组件传值给字组件

转自https://www.cnblogs.com/padding1015/p/7878710.html 父组件通过绑定  传入   数据的名称  值 子组件接收  type为数据类型 原文地址:https://www.cnblogs.com/anxiaoyu/p/8580626.html

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

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

vue父组件传值给子组件

一.父传子 方式一 父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收 父组件 <template> <div id="container"> <Child :msg="data"></Child> </div> </template> <script> import Child from "@/components/Child"

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

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

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

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