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

    父组件给子组件传值方法,使用props

    父页面:parent.vue:

    <template>
        <div class="sidebar_contianer">
            <sidebar-item :routerData="transmitData"></sidebar-item>
        </div>
    </template>
    <script>
    import sidebarItem from './sidebarItem'
    export default {
        data(){
            return{
                transmitData:{
                    title:'首页',
                    uuid:'123'
                }
            }
        },
        components:{
            sidebarItem
        }
    }
    </script>

    第一步:用import引入子组件

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

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

    子页面:child.vue

    <script>
    export default {
        name:'sidebarItem',
        props:{
            routerData:{
                type:Object,
                default:null
            }
        }
    }
    </script>

    子组件要给父组件传值方法,使用$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对状态进行管理。

  • 相关阅读:
    保险实战
    单片机的应用(位操作)
    显示转换(类型转换)
    游泳池的容量
    消失的重量(隐式变换)
    物品交换(变量)
    物品的存放(变量)
    输出变量的界值(int、float、long.....)
    在屏幕上输出内容
    C#笔记
  • 原文地址:https://www.cnblogs.com/xiejn/p/14117936.html
Copyright © 2011-2022 走看看