VUE—父子组件传值、改值、调用方法。。。。
VUE—父子路由传值(控制显示隐藏)方法一:子路由<input @click="changed" readonly type="text">methods: {changed () {this.$emit('changedFn', true) // 参数一:事件名 参数二:传递的值}}父路由<Inp...
·
VUE—父子路由传值并改值(控制显示隐藏)
- 一:父传子,事件派发,子调用父方法
父路由
<Input @changedFn="toggle"></Input> // 组件
data () {
return {
isShow: false
}
},
methods: {
toggle () { // 父组件写了一个方法,子组件来调用
this.isShow = true
}
},
子路由
<input @click="changed" readonly type="text">
methods: {
changed () {
this.$emit('changedFn', true) // 事件派发:参数一:事件名 参数二:传递的值(可不写)
}
}
- 二:父传子,子改值,父同步
父路由
<Input :subIsShow.sync="isShow"></Input>
// .sync是同步的意思,是用来子路由修改父路由传过来的值,父路由也同步修改
// 子路由定义了一个subIsShow参数来接受父路由isShow传递的值
data () {
return {
isShow: false
}
},
子路由
<input @click="changed" readonly type="text">
props: { // 子路由在changed方法里定义了subIsShow用来接收父路由传过来的isShow的值
subIsShow: {
type: Boolean, // 做类型判断
default: false // 默认为false
}
},
computed: { // subIsShow用来接收父路由isShow传过来的值,但是不能直接操作,所以用val进行接收并操作
val: function () {
return this.subIsShow // 把subIsShow的值给val
}
},
methods: {
changed () {
this.$emit('update:subIsShow', !this.val) // 把val的值更新给subIsShow,这时因为subIsShow和isShow同步,所以父路由的isShow也进行了更新
}
},
- 三:父传子
父路由
<Input :subText="text"></Input>
data () {
return {
text: '123456'
}
},
子路由
<input v-model="subText" type="text">
props: {
subText: {
type: String,
default: ''
}
},
- 四:父调用子方法/属性也可以
子路由
methods: {
test () { // 父组件调用子组件的方法
alert('我是子组件的方法')
}
}
父路由
<button @click="testFn">我是父组件的按钮</button>
<List ref="list" ></List> // 子组件 利用ref获取节点
methods: {
testFn () {
this.$refs.list.test() // 利用ref调用子组件中的方法
}
}
更多推荐
已为社区贡献16条内容
所有评论(0)