vue父子通信的基本使用

项目中没怎么用过父子通信，很多页面都是路由切换实现的，后来做首页的时候发现首页的路径没法配置，我强行在原先的首页上写了个子组件，通过判断路径使其强行跳转实现的

这个时候跳转页面的时候就要使用到了父子间的通信问题了，首页点击详情，跳转详情页需要携带主播id。之前的做法是跳转的时候携带参数（$router.push()方法），子组件显然不能这样用。

参考。看代码：

使用新脚手架举例：

父传值给子

helloworld.vue中

<template>    
　　　<section>

       <!-- 路由跳转时$router.push()中可携带参数 (router/index.js中配置好路径即可)-->

       <router-link to="/child">路由跳转</router-link>

       <!-- 父子组件传值使用自定义事件监听data值-->

       <childCom :message='passData'></childCom>

    </setion>

</template>
<script>
　　import childCom from '@/components/childComponent'
　　export default {
　　　　data () {
　　　　　　return {
　　　　　　　　passData: 'this is parent's data !'
　　　　　　}
　　　　}
   }
</script>

子组件childComponent.vue:

<template>

  <h4>这里是子组件</h4>

</template>

<script>

  export default {

    props: ['message'], // 接收父组件中的值

    data () {

      return {}

    },

    created() {

      console.log(this.message) // this is parent's data ！

    }

  }

</script>

子组件传值到父组件（不能直接改变父组件中的值）

childComponent.vue

<template>

    <button @click="changeData"></button> // 点击事件触发

</template>

<script>

export default {

    data () {

        return {

            msg: 'This is child's component'

        }

    },

    methods: {

        changeData () {

             this.$emit('passMyData', this.msg) // emit触发自定义事件

        }

    }

}

</script>

helloworld.vue

<childCom @passMyData="getData"></childCom> // 监听自定义事件，子组件触发之后，触发getData事件

methods: {

    getData (val) {

         console.log(val) // This is child's component 传值成功
    } 
}

巴特西

vue父子通信的基本使用

最新文章

热门文章