您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
Vue中如何实现父子组件传值,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
(一)传递数值
1.子组件:Header.vue
<template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> <h3>{{msg}}</h3> </div> </template> <script> export default { data() { return { } }, methods: { }, // 接收父类的传值 props: ['msg'] } </script>
可以看到,在子组件中的data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性,接收就是靠 props: ['msg']。
2.父组件Home.vue
<template> <div> <!-- 2.使用子组件,并向子组件传值 --> <v-head :msg="msg"></v-head> <br> <br> </div> </template> <script> // 1.引入子组件 import Head from './Head.vue'; export default { data() { return { msg: '我是一个组件' } }, methods: { }, components: { "v-head": Head }, // 页面刷新时请求数据 mounted() { } } </script>
传值的核心思想就是,在使用子组件的地方,加上要传递的值:<v-head :msg="msg"></v-head>
(二)传递方法
传递方法的写法和传递数值一样,下面只写出关键步骤:
父组件
<template> <div> <!-- 2.使用子组件,并向子组件传值 --> <v-head :run="run"></v-head> <br> <br> </div> </template> <script> // 1.引入子组件 import Head from './Head.vue'; export default { data() { return { msg: '我是一个组件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 页面刷新时请求数据 mounted() { } } </script>
子组件
<template> <div> <button @click="run">接收父组件的方法</button> </div> </template> <script> export default { data() { return { } }, methods: { }, // 接收父类的传值 props: ['run'] } </script>
(三)传递对象
传递对象的写法和传递数值一样,下面只写出关键步骤:
父组件
<template> <div> <!-- 2.使用子组件,并向子组件传值,这里的 this 就是 Home 组件 --> <v-head :home="this"></v-head> <br> <br> </div> </template> <script> // 1.引入子组件 import Head from './Head.vue'; export default { data() { return { msg: '我是一个组件' } }, methods: { run() { alert(this.msg); } }, components: { "v-head": Head }, // 页面刷新时请求数据 mounted() { } } </script>
子组件
<template> <div> <!-- data对象里并没有 msg 属性,这里调用的是父类传递过来的 msg 属性 --> <h3>{{msg}}</h3> <br> <br> <button @click="run">接收父组件的方法</button> </div> </template> <script> export default { data() { return { // 调用传过来的home组件的msg属性 msg: this.home.msg } }, methods: { run() { // 调用传过来的home组件的run()方法 this.home.run(); } }, // 接收父类的传值 props: ['home'] } </script>
(四)传递数值类型校验
props: { 'home': Object }
看完上述内容,你们掌握Vue中如何实现父子组件传值的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。