vue子组件方法获取父组件中的参数_Vue组件component基本用法

一、注册组件1、全局组件2、私有组件这是私有组件'}}})二、组件切换登录注册Vue.component('login',{template:'登录组件'});Vue.component('register',{template:'注册组件'});var vm=new Vue({el: '#app',data: {...

weixin_39995764

3099人浏览 · 2020-11-21 05:10:18

weixin_39995764 · 2020-11-21 05:10:18 发布

一、注册组件

1、全局组件

2、私有组件

这是私有组件

' } }})

二、组件切换

登录注册

Vue.component('login',{ template:'

登录组件

'});Vue.component('register',{ template:'

注册组件

'});var vm=new Vue({ el: '#app', data: { comName: 'login' }})

三、值、方法传递

1、父组件向子组件传递值

显示父组件信息：{{ parmsg }}

', props:['parmsg'] } }})

2、父组件向子组件传递方法

`子组件`

var com1={ template: '#tmp1', data(){ return{ sonmsg: '哈哈456' } }, methods:{ myclick(){ this.$emit('func1','参数123', this.sonmsg) } }}var vm=new Vue({ el: '#app', methods: { show(p1, p2){ console.log('OK。参数：'+p1+','+p2) } }, components:{ com1 }})

3、父组件通过ref调用子组件值、方法

登录组件

', data(){ return{ msg: '子组件信息' } }, methods: { show(){ console.log('子组件方法') } }}var vm=new Vue({ el:'#app', methods:{ getElement(){ console.log('获取子组件数据：'+this.$refs.mylogin.msg) this.$refs.mylogin.show() } }, components:{ login }})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^