vue组件之间的传值的几种方法

vue组件之间传值的几种方法总结

一、父传子

父传子技术就是把父组件中的数据传给子元素调用，用到的方法是

1.在父组件的子组件标签上绑定一个属性，挂载要传输的变量 ,语法是

：属性名 （冒号加属性名）

2.在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用props: [“属性名”] props:{属性名:数据类型}

注：前提是子组件要在父组件中注册组件并使用在父组件中，才可以传值
//父组件
<template><div><i>父组件</i><son :data='testData'></son> </div>
</template><script>
import son from "./son.vue";//导入父组件
export default {components: { son },//注册组件name: "父组件",data() {return {testData: [1,2,3,4,5], //父组件定义变量};},
};
</script>
----------------------------------------------------------------
//子组件（son.vue）
<template><div>{{data}}</div>
</template><script>
export default {name: '子组件',props:["data"],
};
</script>

二、子传父

子传父主要用到的是 this.$emit(“事件”) 方法

1.在父组件的子组件标签上自定义一个事件，然后调用需要的方法
2.在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

//父组件
<template><div><i>父组件</i><!--页面使用--><son @dataFromSon="receiveData"></son>//自定义一个事件</div>
</template><script>
import son from "./son.vue"; //导入父组件
export default {components: { son }, //注册组件name: "父组件",data() {return {sonData:''};},methods: {receiveData(data){this.sonData=dataconsole.log(this.data)  //输出'测试子传父'}},
};
</script>
----------------------------------------------------------------
//子组件
<template><div><button @click="clickme">点我</button></div>
</template><script>
export default {
components: { },name: '子组件',data(){return{data:'测试子传父'}},methods: {clickme(){this.$emit('dataFromSon',this.data)//通过emit来触发事件}},
};
</script>

三、兄弟组件通信（bus总线）

1.在src中新建一个Bus.js的文件，然后导出一个空的vue实例

2.在传输数据的一方引入Bus.js 然后通过Bus.emit ( “ 事件名 ” , " 参数 " ) 来来派发事件 ,数据是以 emit(“事件名”,“参数”)来派发事件

3.在接受的数据的一方引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

1.新建bus.js，并引用
/**bus.js文件**/
import Vue from 'vue'
const bus = new Vue()
export default bus
2.在A组件页面里
<template><div class="components-a"><button @click="abtn">A按钮</button></div>
</template>
<script>
import bus from '@/assets/js/bus';
export default {name: 'app',data () {return {msg:"我是组件A"}},methods:{abtn(){eventVue.$emit("myFun",this.msg)   //$emit这个方法会触发一个事件}}
}
</script>
3.在B组件
<template><div class="components-a"><div>{{btext}}</div></div>
</template>
<script>
import bus from '@/assets/js/bus';
export default {name: 'app',data () {return {btext:"我是B组件内容"}},created(){this.bbtn();},methods:{bbtn(){eventVue.$on("myFun",(message)=>{   //这里最好用箭头函数，不然this指向有问题this.btext = message      })}}
}
</script>

四、ref/refs（父子组件通信）

1.ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
2.可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种

//父组件
<template><div><button @click="sayHello">sayHello</button><child ref="childForRef"></child></div>
</template>
<script>
import child from './child.vue'export default {components: { child },data () {return {childForRef: null,}},mounted() {//获取整个子组件DOMthis.childForRef = this.$refs.childForRef;console.log(this.childForRef.name);},methods: {sayHello() {this.childForRef.sayHello()//也可以这样直接调用子组件的方法this.$refs.childForRef.sayHello()}}}
</script>
-------------------------------------------------------------------
//子组件
<template><div>child 的内容</div>
</template>
<script>
export default {data () {return {name: '我是 child',}},methods: {sayHello () {console.log('hello');alert('hello');}}
}
</script>

五、this.$parent(子对父)

1.通过parent可以获父组件实例 ,然后通过这个实例就可以访问父组件的属性和方法

注意：使用这个方法要注意的是如果出现多层嵌套子组件的时候可能不生效，解决办法就是套一层用一个 $parent ，两层用this. parent.parent.parent.parent …
//父组件
<template><div><button @click="sayHello">点我测试</button><p v-model='data'>{{data}}</p></div>
</template>
<script>
import child from './child.vue'export default {components: { child },data () {return {data:'我是父组件的值'}},methods: {sayHello() {alert('sayHello!');}}}
</script>
-------------------------------------------------------------------
//子组件
<template><div>child 的内容</div><button @click="test">点我通过$parent调用父组件</button>
</template>
<script>
export default {data () {return {}},methods: {test () {this.$parent.sayHello() //调用父组件的方法//调用改变父组件数据this.$parent.data='我被子组件改变值了'}}
}
</script>

vue组件之间的传值的几种方法相关推荐

vue组件之间互相传值：父传子，子传父
vue组件之间互相传值:父传子,子传父为什么要用到组件间传值? 答:组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据,也不能直接将子组件的数据传到父组件里面 ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue组件之间的传值（兄弟间的传值）
概要:vue组件之间的传值大致有三种:父传子,子传父,还有兄弟之间,今天我们主要来讲兄弟之间的传值.废话不多说,我们直奔主题 vue 组件兄弟间的传值是要通过一个事件总线来实现(可以把事件总线理解为一 ...
【Vue知识点】 vue组件之间如何传值
1.父组件传值子组件父组件:<Header :msg='msg'/> 子组件: props:['msg'] props:{ msg:数 ...
【全网最全】Vue 组件之间的传值
1.组件间的传值方法简述父组件 =data=> 子组件子组件通过 props 子组件 =data=> 父组件父组件向子组件传递一个函数(callback) 使用 $emit 自定义事 ...
vue父组给子子组件传html,vue组件之间互相传值：父传子，子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂作笔记-vue 通常页面的视图App.vue应为这样一.父组件向子组件传值浏览器 1.建立子组件,在src/components/文件夹下新建一个C ...
Vue组件之间相互传值的方式
1父传子 1.1父组件 1.2子组件:在 props 中添加了元素之后,就不需要在 data 中再添加变量了 2子传父 2.1子组件 2.2父组件兄弟组件传值一:使用全局函数全局事件第一步: 在入 ...
vue 组件之间的传值
父向子传值父组件 <v-footer :projectdat="dat"></v-footer> export default {data() {retur ...
vue组件之间的传值
一.父组件向子组件传: 1.在父组件的data中定义要传的值 2.在父组件引用的子组件中用v-bind 绑定 3.在子组件中用props定义父组件传的值,和v-bind对应 4.在子组件用mustac ...

vue组件之间的传值的几种方法

vue组件之间传值的几种方法总结

一、父传子

二、子传父

三、兄弟组件通信（bus总线）

四、ref/refs（父子组件通信）

五、this.$parent(子对父)

vue组件之间的传值的几种方法相关推荐

最新文章

热门文章