Vue中的组件传值

Vue中组件传值

一、基本的组件传值

1、父子组件：父子组件的代码格式（标签的嵌套）

父组件模板里面有子组件使用<Son></Son>

（1）、父给子传

js

子组件<template><template>

<script>

export default{

props:['name'],//子组件的属性

}

</script>

//父组件

<template>

<Son name="AA" ></Son>

<template>

<script>

export default{}

</script>

（2）、子给父

触发事件：this.$emit();

vuex

js

子组件

<template>

<div></div>

<template>

<script>

Export default{

updated(){

this.$emit("myClick","我是儿子");//触发子组件的自定义事件，调用父组件的函数，传参

}

}

</script>

//父组件

<template>

<input type="button" v-on:click="fn" />

<Son v-on:myClick="fn" ></Son>

<template>

<script>

Export default{

methods:{

 fn(str){

}}}

</script>

2、兄弟组件

js

//父组件的模板里：

<Son1></Son1>

<Son2></Son2>

使用：事件总线，vuex，共同的父亲

使用一个空的vue对象，借助vue对象的$on和$emit。空的vue对象就相当于一个全局对象

代码格式：

js

1、创建一个空的vue对象

./utils/vuebus.js

export default new Vue();

//假定Son1给Son2传

2、在Son2里绑定事件（给事件名绑定一个函数）

<template><template>

<script>

import vuebus from "./utils/vuebus"

export default{

created(){

 vuebus.$on("myClick",(str)=>{

 console.log(str);

});

}

}

</script>

3、在Son1触发Son2里绑定的事件（触发事件，并调用函数）

<template>

<input type="button" value="传" @click="fn" />

<template>

<script>

import vuebus from "./utils/vuebus"

export default{

methods:{fn(){

 vuebus.$emit("myClick","我是你兄弟"); //触发事件，就是在调函数

}

}

}

</script>

3、无关组件

使用：vuex，路由。

当两个组件不是同时都在内存中存在的话，那么就需要借助于另外 一个对象（如：vuex，vue-router）。

在项目中我用到的是父子间组件传值。父子组件就是在一个Vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。而在父组件中不能直接调用子组件中的变量值。

父组件在引用子组件时，通过属性绑定的形式，把需要传递给子组件的数据，传入到子组件内部，让子组件使用。

把父组件传递过来的数据在props中定义

组件中的所有props中的数据，都是通过父组件传递给子组件的。

利用watch监听父组件type的变化。