Vue - 组件传值（父子组件间传值、非父子组件间传值）-蒲公英云

Vue - 组件传值（父子组件间传值、非父子组件间传值）

我就是我 2022-12-21 11:00 434阅读 0赞

推荐：Vue汇总

Vue - 组件传值（父子组件间传值、非父子组件间传值）

如果你对组件不太了解，推荐你先阅读它：Vue - Vue组件基础

父子组件间传值

父组件向子组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件传值</title>
    <script src="./js/vue.js"></script>
</head>
<body>
   <div id="div">
       <child :message="message"></child>
   </div>
</body>
</html>
<script> Vue.component('child' , { props:{ message: String }, template: '<div>{ {message}}</div>' }); var vue = new Vue({ el: '#div', data: { message: 'Hello Jack' } }) </script>

父组件向子组件传值通过Prop这种方式，Vue - Prop。

效果：
在这里插入图片描述
子组件向父组件传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件传值</title>
    <script src="./js/vue.js"></script>
</head>
<body>
   <div id="div">
       <child :message="message" @click-child="clickChild"></child>
       <p v-show="Boolean(value)">{
   {value + 'kaven'}}</p>
   </div>
</body>
</html>
<script> Vue.component('child' , { props:{ message: String }, data: function () { return { value: '你干嘛点我！' } }, template: '<div @click="clickDiv">{ {message}}</div>', methods: { clickDiv(){ this.$emit('click-child' , this.value); } } }); var vue = new Vue({ el: '#div', data: { message: 'Hello Jack', value: null }, methods: { clickChild(value) { this.value = value; console.log(this.value) } } }) </script>

子组件向父组件传值通过$emit(value)这种方式。
效果：
在这里插入图片描述
触发点击事件。

非父子组件间传值

非父子组件间传值，如果通过一层一层的父子组件间传值来实现就太繁琐了，代码也会及其复杂。这里介绍通过发布订阅模式或者说观察者模式来实现非父子组件间传值。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件传值</title>
    <script src="./js/vue.js"></script>
</head>
<body>
   <div id="div">
       <child :message="message"></child>
       <child message="我是另外一个子组件，和上面子组件不是父子关系。"></child>
   </div>
</body>
</html>
<script> Vue.prototype.bus = new Vue(); Vue.component('child' , { props:{ message: String }, data: function(){ return { value: this.message } }, template: '<div @click="clickDiv">{ {value}}</div>', methods: { clickDiv(){ this.bus.$emit('click' , this.value); }, }, mounted: function () { // 作用域发生变化 var _this = this; this.bus.$on('click' , function (value) { console.log(_this.value); _this.value = value; }) } }); var vue = new Vue({ el: '#div', data: { message: 'Hello Jack' } }) </script>