vuejs子组件传参

㈠ Vue-Cli—04.父子组件传值|祖孙组件传值|兄弟组件传值

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

子组件：

子组件通过$emit触发一个自定义事件，将更新的数据传给父组件。
子组件：

父组件：

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意： 后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

后代组件：

在Vue的原型对象上，添加一个 $bus属性 ，该属性的的属性值是一个Vue实例。Vue的所有实例，都将共用同一个$bus。这个$bus属性，称之为：中央事件总线。
vm.$emit( eventName, […args] )： 触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$once( event, callback )： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )： 移除自定义事件监听器。

main.js文件：

兄弟A鸽子组件：
点击鸽子组件中的‘修改乌鸦数据’按钮，可以修改乌鸦组件页面的数据。

兄弟B乌鸦组件：

㈡ vue易犯错误之父子组件传值注意-加冒号和不加冒号区别

父组件向子组件传值，如果不加:冒号，传过去的不是数值，而是一个字符串

父组件向子组件传值，加上:冒号，传过去的就是一个数值，不是字符串，因为加了:冒号以后引号""里面的内容就是一个js表达式

只有传递字符串常量时，不采用v-bind形式，其余情况均采用v-bind形式传递。

如果不加冒号，子组件在接收到值之后，监听做不到改变监听值内的属性

㈢ vue2.0 父组件给子组件传递数据的方法

在父组件
App.vue
中引用子组件
A.vue，把
name
的值传给
A
组件。
1、安装
在桌面新建一个文件夹
$
cd
到文件中
$
npm
install
-g
vue-cli
$
vue
init
webpack
.
$
npm
install
$
npm
run
dev
vue
init
webpack
.
之后的选择解释
2、删除
1、删除App中的一些内容如下
2、删除components文件中的HelloWorld.vue
3、修改
修改App.vue
如下：
<template>
<div
id="app">
//
message
定义在子组件的
props
中
<A
v-bind:message="name"/>
</div>
</template>
<script>
import
A
from
'./components/A'
export
default
{
name:
'App',
components:
{
A
},
data(){
return{
name:"我就是数据啊"
}
}
}
</script>
4、新建
在components新建A.vue并写入内容如下：
<template>
<div>{{message}}</div>
</template>
<script>
export
default
{
props:
['message']
//接受message传过来的数据
}
</script>
5、最后
在命令行输入
$
npm
run
dev
总结
以上所述是小编给大家介绍的vue2.0
父组件给子组件传递数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:vue父组件向子组件(props)传递数据的方法vue组件Prop传递数据的实现示例vue中各组件之间传递数据的方法示例vue.js组件之间传递数据的方法vue子组件使用自定义事件向父组件传递数据Vue2.x中的父组件传递数据至子组件的方法vuejs动态组件给子组件传递数据的方法详解

㈣ vue父子传参

1、父子传参

 父组件向子组件传值

父向子

父组件上边，在要接受数据的组件上通过动态属性传递

如

:data="data"

子组件通过props属性接受

1.数组

    props:['title','count','imgs','styles'],

2.对象

    属性名类型 Object | Array | String | Numeber | Boolean | Function

    props:{

        title:Array,

    }

    props:{

        属性名：{

            type:类型，

            required:必填项，默认值为false,

            defalult:默认值，（如果是简单值的话，直接设置，如果是数组或者对象的话，需要一个函数），

            validator(val){

            自定义格式的验证，函数return 成立

            }

        }

    }

    vue 是单向数据流，不能在子组件里面直接修改父组件传递过来的值

   子向父

        子组件里边使用$emit

    $emit（'事件名称'，'实参1'，'实参2'）

    <button @click="$emit('addCount',count)"></button>

    @事件名称 = "事件处理程序"

    父组件接受的方法

        @addCount = "方法名"

        在methods方法里面写函数

        addCount(){

            console.log(1);

        }

      非父子

            3通过创建一个空对象

            在 main.js 里面Vue.prototype.$bus=new Vue();

            所有的组件都是通过vueComponent 实例出来的 vueComponent继承vue

            子组件

              传参的方式:  this.$bus.$emit('add',item)

                在created方法里面接受

                this.$bus.$on('add',(obj)=>{

                    console.log(obj)//传过来的参数值

                })

㈤ Vue 组件之间传参！

父组件向子组件传参，通过自定义属性的方式进行传参，在子组件中使用prop定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用.

子组件向父组件传数据使用自定义事件， vue组件提供了一个 emit('自定义事件名'， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据

兄弟组件之间的数据传递，通过eventBus来做中间的桥梁，传输方通过中间组件调用 on 接受数据，两者之间的自定义属性名保持一致。

通过vuex存储数据， Vuex是一个专为vue.js 应用程序开发的状态管理模式， 它采用[ 集中式 ]存储管理数据，以相应的规则保证状态以一种可预测的方式发生改变， 一变全变，同步更新数据。

ref 引用可以作用在h5标签上，也可以作用在组标签上，作用在h5标签上是获取的是DOM对象， 作用在组件标签上，通过this.$refs获取的是组件的实例对象。

㈥ vue.js 怎么给组件传参数

你是说父组件和子组件传还是子组件给父组件传？
子组件给父组件传的话

this.$emit(func,value) 这样传递

父组件给子组件传的话给子组件里面放一个props属性

㈦ 如何在vue.js组件之间进行数据传递

组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。

父子组件

父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

子组件想要使用父组件的数据，我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。

如何传递数据

在父组件 father.vue 中引用子组件 child.vue，把 name 的值传给 child 组件。

<template>
<div class="app">
// message 定义在子组件的 props 中
<child :message="name"></child>
</div>
</template>
<script> import child from './child.vue'; export default { components: { child }, data() { return { name: 'linxin' } } }</script>

在子组件 child.vue 中的 props 选项中声明它期待获得的数据

<template>
<span>Hello {{message}}</span>
</template>
<script> export default { // 在 props 中声明获取父组件的数据通过 message 传过来 props: ['message'] }</script>

那么页面中就会渲染出：Hello linxin

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。修改子组件的 prop 值，是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢？

那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件，当子组件里 $emit(eventName) 触发该自定义事件的时候，父组件执行相应的操作。

比如在父组件中控制一个弹框子组件的显示，在子组件中按下关闭之后，告诉父组件去隐藏它，然后父组件就执行操作隐藏弹框。例如在子组件中：

这个emit就是触发事件的地方。

如果是复杂场景，或者不相关的组件之间，建议用vuex，这个相当于Angular中的注册事件，具体过程可以参考官方手册，写的例子和图例都很详细了

㈧ vue.js父组件怎么传值给子组件

子组件通过$emit方法向抄父组件发送数据，子组件在父组件的模板中，通过自定义事件接收到数据，并通过自定义函数操作数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<!-- 子组件向父组件传递数据 -->
<div id="box">
<v-parent></v-parent>
</div>

㈨ vue.js 两个父组件中的子组件怎么传值

A子传A父($emit和$on)，A父给B子（prop）。。