- 父向子传递参数，通过属性的方式
- 子向父传递参数，通过触发事件的方式
- 使用全局数据传递参数
- 通过挂载vue的原型
- 通过globalData的方式 （兄弟/非兄弟之间都可以使用）
父向子 传递
- 父页面向子组件ul-com通过属性名list传递了数组数据
- 子组件通过props接收数据
<ul-com :list="[1,2,3,4]">
props: {
list: Array
}# img-border.vue
<template>
<!-- 将props中的mysrc看成是data中的变量来使用-->
<img class="img-border" :src="mysrc"/>
</template>
<script>
export default {
// 声明父组件传递过来的属性
props: {
mysrc: String
}
}
</script>
<style>
.img-border {
border-radius: 50%;
}
</style># index.vue(父组件） 引入组件img-border.vue（子组件）
<template>
<view class="content">
<img-border :mysrc="src1"/> // mysrc作为属性名传递给子组件（与子组件中的属性保持一致）
<img-border :mysrc="src2"/>
</view>
</template>
<script>
import imgBorder from "@/components/img-border";
export default {
data() {
return {
src1: "src1.png";
src2: "src2.png";
}
},
components: {
imgBorder: imgBorder
}
}
</script>子向父 传递
子组件向父组件传递数据
- 子组件通过触发事件的方式向父组件传递数据
- 父组件通过监听事件的方式来接收数据
methods: {
handleClick() {
this.$emit("textChange", "from Child Component"); // this.$emit 是固定写法格式
}
}
<ul-com :list="[1,2,3,4]"> @textChange="handleClick"/># img-border.vue
<template>
<!-- 将props中的mysrc看成是data中的变量来使用-->
<img @click="handleClick" class="img-border" :src="mysrc"/> #第一步
</template>
<script>
export default {
methods: {
handleClick() {
console.log("hello img-border.vue");
// 子向父传递数据，通过触发事件
// this.$emit("自定义的事件名称", "要传递的参数");
this.$emit("mysrcChange", this.mysrc); #第二步
}
}
}
</script>
<style>
.img-border {
border-radius: 50%;
}
</style>
--------------------
# index.vue(父组件） 引入组件img-border.vue（子组件）
<template>
<view class="content">
<img-border @mysrcChange="handleSrcChange" :mysrc="src1"/> // mysrc作为属性名传递给子组件（与子组件中的属性保持一致）#第三步
</view>
</template>
<script>
import imgBorder from "@/components/img-border";
export default {
data() {
return {
mysrc: "",
src1: "src1.png";
}
},
components: {
imgBorder: imgBorder
},
methods: {
handleSrcChange(e) { #第四步
console.log("父组件的自定义事件被触发");
console.log(e);
this.mysrc = e;
}
}
}
</script>主要由四步组成，如以上代码块所示。
全局共享数据
- 通过vue的原型共享数据 （较为常用）
- 通过globalData共享数据 （较为常用）
- vuex （了解即可）
- 本地存储（了解即可）
为何需要使用全局共享数据？
- 有些组件之间不是父子关系，而是中间隔了很多层关系。组件之间共享数据无法通过父子传参，需要使用全局共享数据实现。
Vue.prototype.baseurl = "http://www.baidu.com"
getApp().globalData.text = 'test'main.js 中定义vue的原型
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
// 定义全局数据，通过Vue的原型实现
Vue.prototype.baseurl = "http://www.baidu.com"; // Vue.prototype定义的变量均可通过this调用
App.mpTyp = 'app'
const app = new Vue({
...App
})
app.$mount()App.vue中定义globalData
<script>
export default {
onLaunch: function() {
console.log('App launch');
},
onShow: function() {
console.log('App show');
},
onHide: function() {
console.log('App hide');
},
globalData: {
base: "www.360.com"
}
}
</script>index.vue中使用Vue定义的原型变量
<template>
...
</template>
<script>
export default {
data() {
...
},
components: {
...
},
methods: {
...
},
// onLoad 页面加载完毕就会触发的生命周期函数
onLoad() {
console.log(this.baseurl); // 来自main.js
// 获取globalData数据
// 固定写法，表示获取当前小程序的所有实例 getApp()
console.log(getApp().globalData.base); //任意页面均可调用 （可读）
getApp().globalData.base = "1234"; //任意页面均可调用 （可写）
}
}
</script>组件插槽
- 标签也是一种数据，利用插槽slot可实现动态为父组件向子组件传递标签
- 通过slot实现占位符
src\components
|_ my-form.vue （子组件）
<template>
<view class="form">
<view class="form_title">title</view>
<view class="form_content">
<slot></slot> <!-- 第二步： 定义slot-->
</view>
</view>
</template>
<script>
...
</script>
<style>
...
</style>index.vue 将标签传递给子组件my-form.vue
<template>
<view class="content">
<my-form>
<view>
<!--第一步：定义标签-->
<input type="text">
<radio/>
<checkbox />
</view>
</my-form>
</view>
</template>
<script>
import myForm from "@/components/my-form";
export default {
components: {
myForm
}
}
</script>
<style>
...
</style>