vue uniapp组件传值
记录一下自己在vue项目里创建组件的过程1、在项目里新建一个component目录,然后在目录下新建demo.vue 文件(文件名字根据自己起有意义的)2、子组件页面代码<template><view class=""><view class="">{{msgs}}</view><button type="default" @click="bt
·
vue 父子之间之间传值
1、在项目里新建一个component目录,然后在目录下新建demo.vue 文件(文件名字根据自己起有意义的)
2、子组件页面代码
<template>
<view class="">
<view class="">{{msgs}}</view>
<button type="default" @click="btn">点击改变上面的文字</button>
</view>
</template>
<script>
export default{
data(){
return {
data_s:"我是子组件里的文字"
}
},
props:{
"msgs":String//子组接收父组件传来的值
},
methods:{
//子组件的点击事件
btn(){
this.$emit("dianji",this.data_s)
//"dianji"是父组件触发自定义事件名称、随意起名
//this.data_s 是子级传给父级的文字
}
}
}
</script>
<style>
</style>
3、父组件页面代码
<template>
<view class="content">
<Mycomponent :msgs="fuzujian" @dianji="fujibtn"></Mycomponent>
<!-- 'msgs'是传给子组件的 'fuzujian'是父组件里定义的数据 -->
</view>
</view>
</template>
<script>
//引入组件
import Mycomponent from "../../component/demo.vue"
export default {
data() {
return {
fuzujian:"你好,我是父组件传过去的",
},
components:{
Mycomponent
//定义组件
},
methods: {
//父组件触发的事件
fujibtn(txt){
this.fuzujian = txt
console.log(txt)
//打印结果为 我的子组件里的文字 可以赋值给父级
}
}
}
</script>
<style>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)