Vue父子组件传值

Love The Way You Lie 2023-05-31 06:46 104阅读 0赞

首先创建基础项目

https://blog.csdn.net/sunt2018/article/details/102697487

然后写一个父子组件

App.vue

  1. <template>
  2.   <div id="app">
  3.       <!-- 导入父组件 -->
  4.       <!-- 默认规则 必须大写MP 使用小写m-p，-隔开  -->
  5.     <m-parent></m-parent>
  6.   </div>
  7. </template>
  10. <script>
  11. import MParent from './views/Parent' //d导入父组件
  12. export default {
  13.     components:{
  14.         MParent,//注册父组件
  15.     },
  17. }
  18. </script>

在views 创建父子组件

Parent.vue

首字母大写，也是大多数默认规则

  1. <template>
  2.     <div>
  3.         <h1>Parent父组件</h1>
  4.         <m-child></m-child>
  5.     </div>
  6. </template>
  8. <script>
  9. import MChild from './Child'
  10. export default{
  11.     components:{
  12.         MChild,
  13.     },
  14. }
  15. </script>
  17. <style scoped>
  18. </style>

Child.vue

  1. <template>
  2.        <div>
  3.            <h3>child组件</h3>
  4.        </div>
  5. </template>
  7. <script>
  8. export default{
  10. }
  11. </script>
  13. <style>
  14. </style>

父子组件间的传值

  • props/$emit
  • $parent/children
  • $ref

第一种传值方式，绑定属性

  1. <!-- 父组件中的 子组件上写  -->
  2. <m-child v-bind:msg="'from Parent msg'"></m-child>
  3. <!-- 使用v-bind , 字段参数是msg,传入内容为字符串   -->
  9. <!-- 子组件中接收 -->
  10. <template>
  11.        <div>
  12.            <h3>child</h3>
  13.            <!-- 使用 -->
  14.            <h5>{
  15.    {msg}}</h5>
  16.        </div>
  17. </template>
  19. <script>
  20. export default{
  21.     props:{//接收参数
  22.         msg:{
  23.             type:String,//类型
  24.             default:''  // 默认值
  25.         }
  26.     }
  27. }
  28. </script>

反向传值，子组件向父组件传值，一般是通过事件触发

  1. <!-- 子组件写一个点击事件 -->
  2. <button @click="passMsg">走你</button>
  4. <script>
  5. export default{
  6. methods:{
  7.   passMsg(){
  8.       this.$emit('showMsg','i am from child')
  9.       // 传一个自定义的事件 showMsg，值是 i am from child
  10.   }
  11. }}
  12. </script>
  14. <!-- 父组件,使用@事件=“事件” 去监听 -->
  15. <m-child v-bind:msg="'from Parent msg'" @showMsg="showMsg"></m-child>
  16. export default{
  17.     data(){
  18.       return {
  19.           msg:'',// 通过msg去接收监听的参数
  20.       }  
  21.     },
  22.     components:{
  23.         MChild,
  24.     },
  26.     methods:{//监听方法，val是子组件传入的值
  27.         showMsg(val){
  28.             this.msg = val
  29.         }
  30.     }
  31. }
  32. </script>

第二种方法，使用 $parent/ $children

  1. 需要创建一个钩子
  2. mounted(){
  3.     this.$children[0].msg //要手动寻找索引，然后再找信息
  4.     //还可以触发方法
  5. }

第三种方法 refs

  1. this.refs.child
  2. 和第二种方法一样，都是一个数组
  3. 需要先通过索引找到需要的子组件，然后调用里面的值或则和函数

发表评论

表情：
评论列表 （有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue父子组件传值

    Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值： 静态传值就是直接通过props来传递 动态传值是通

    Dear 丶Dear 丶/ 0 赞/ 469 阅读