美文网首页vue
vue组建父子通信

vue组建父子通信

作者: 匆匆那年_海 | 来源:发表于2019-05-13 15:59 被阅读1次

父-->子(父向子传递数据通过props)

父组件代码
<template>
    <Header :url="baseUrl"></Header>
</template>
<script>
    import Header from './header';
    export default {
        name: 'index',
        components: {
           Header
        },
        data () {
            return {
                baseUrl: 'www.xhy.com'
            }
        }
    }
</script>
子组件代码
<template>
    <header>
        {{url}}
    </header>
</template>
<script>
    export default {
        name: 'header1',
        props:['url']
    }
</script>

子-->父(通过$emit)

this.$emit('自定义事件名','要传递的数据')
子组件代码
<template>
    <div>
          用户名:
          <input type="text" v-model="userName" @change="setUser">
    </div>
</template>
<script>
    export default {
        name: 'login',
        data(){
            return{
                  userName:''
            }
        },
        methods:{
               setUser (){
                  this.$emit('transferUser',this.userName);
               }
        }
    }
</script>
父组件代码
<template>
    <Login @transferUser="getUser"></Login>
</template>
<script>
    import Login from './login';
    export default {
        name: 'app',
        components: {
           Login
        },
        data () {
            return {
                user: ''
            }
        },
        methods:{
          getUser(msg){
              this.user = msg;
           }
        }
    }
</script>

作者:匆匆那年__
链接:https://www.jianshu.com/p/454a9ec78fcf
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

相关文章

  • vue组建父子通信

    父-->子(父向子传递数据通过props) 父组件代码 子组件代码 子-->父(通过$emit) this.$em...

  • vue组建父子多层通信

    父-->子 第一层通过自定义属性传值,之后通过v-bind=""$attrs"传递给子级 子-->父 第一层通...

  • vue组建非父子通信

    子-->子 (可以通过使用一个空的Vue实例作为中央事件总线,也可以使用app实例) 使用app实例,main.j...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • 09-生命周期及非父子组件间的通信

    一. Vue生命周期 二、生命周期代码 三、非父子组件通信 vue中非父子组件通信需要借助一个空的vue实例,案...

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • vue组件通信

    1.组建通讯---父子组件通讯 父子通信通过props属性进行传值 父组件 子组件 1.组建通讯---子父组件通讯...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • Vue的组件通信

    Vue的父子通信问题 参考文档 : Vue 组件组合 使用 props传递数据 用v-on 绑定事件 原理: 父子...

网友评论

    本文标题:vue组建父子通信

    本文链接:https://www.haomeiwen.com/subject/necraqtx.html