zoukankan      html  css  js  c++  java
  • vue父子组件的传值总结

    久违的博客园我又回来了。此篇文章写得是vue父子组件的传值,虽然网上已经有很多了。写此文章的目的就是记录下个人学习的一部分。接下来我们就进入主题吧!

    在开发vue项目中,父子组件的传值是避免不掉的。

    情况一:父组件给子组件传值方法,使用props

    父页面:parent.vue

     1 <template>
     2     <div class="sidebar_contianer">
     3         <sidebar-item :routerData="transmitData"></sidebar-item>
     4     </div>
     5 </template>
     6 <script>
     7 import sidebarItem from './sidebarItem'
     8 export default {
     9     data(){
    10         return{
    11             transmitData:{
    12                 title:'首页',
    13                 uuid:'123'
    14             }
    15         }
    16     },
    17     components:{
    18         sidebarItem
    19     }
    20 }
    21 </script>

    第一步:用import引入子组件

    第二步:在components中注入子组件

    第三步:在子组件中定义一个指令:routerData="transmitData"  (routerData名称需要和子组件中的props保持一致,transmitData是要传递给子组件的数据)

    子页面:child.vue

     1 <script>
     2 export default {
     3     name:'sidebarItem',
     4     props:{
     5         transmitData:{
     6             type:Object,
     7             default:null
     8         }
     9     }
    10 }
    11 </script>

    第四步:在子组件中定义props属性,transmitData的type可以自定义类型(但是必须和父组件中的数据类型一致,否则会报错),default是默认值。

    情况二:子组件要给父组件传值方法,使用$emit


    子页面:a.vue

    <template> 
        <div class="testCom">
            <input type="text" v-model="message" />
            <button @click="click">发送消息给爸爸</button>
        </div>
    </template>
    <script>
    export default {
        data() {
            return {
              message: '我是来自子组件的消息'
            }
        },
        methods: {
          click() {
                //1、childFn 组件方法名,父组件中用childFn方法接收子组件中的数据;2、message是传递给父组件的数据
                this.$emit('childFn', this.message);
            }
        }    
    }
    </script>

    第一步:this.$emit("方法名","传递给父组件的数据")

    父页面:b.vue

    <template>
        <div>
          <child-com @childFn="parentFn"></child-com>
        </div>
    </template>
    
    <script>
    export default {
        // ...
        data: {
            message: ''
        },
        methods: {
           parentFn(childData) {
            this.message = childData;
          }
        }
    }
    </script>

    第二步:父组件中注入子组件(此处代码中省略,如要参考请看情况一)

    第三步:定义方法childFn(必须和子组件中方法名一致),parentFn定义可随意。

    注: 大型的项目如果用以上两种方法传递值,耦合性大。所以大型项目还是的用vuex对状态进行管理。

  • 相关阅读:
    winform登录成功后打开主窗体的合理写法
    C#将字符串转换为整型的三种方法的总结
    win7下安装Oracle11g
    无法将文件“.exe”复制到“.exe”。文件“.exe”正由另一进程使用,因此该进程无法访问该文件
    GDI+
    “System.Data.SqlClient.SqlConnection”的类型初始值设定项引发异常
    winform中为ComboBox控件添加“请选择”或“全部”选项
    IE8不能上传、插入图片的解决办法!
    asp.net mvc实现上传文件
    winform关闭窗体时确认框提示两次
  • 原文地址:https://www.cnblogs.com/phermis/p/10710894.html
Copyright © 2011-2022 走看看