博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

vue说到组件通信,无非是父组件传子组件,子组件传父组件,跨级组件传值,同级组件传值

一、父组件传子组件,核心--props

在这里触发 handleClick 点击事件,额外声明一个clickData,点击按钮将 inpMessage 的值赋给 clickData ,再传给子组件

父组件index.vue

  1.  
    <template>
  2.  
    <div>
  3.  
    <input type="text" v-model="inpMessage">
  4.  
    <button @click="handleClick">点击传给子组件</button>
  5.  
    <children :message="clickData" /> //message为子组件props接收的值,clickData为父组件要传的值
  6.  
    </div>
  7.  
    </template>
  8.  
     
  9.  
    <script>
  10.  
    import children from './page/children'
  11.  
    export default {
  12.  
    name: "index",
  13.  
    components:{
  14.  
    children
  15.  
    },
  16.  
    data(){
  17.  
    return{
  18.  
    inpMessage:'',
  19.  
    clickData:''
  20.  
    }
  21.  
    },
  22.  
    methods:{
  23.  
    handleClick(){
  24.  
    //赋值
  25.  
    this.clickData = this.inpMessage
  26.  
    },
  27.  
    }
  28.  
    }
  29.  
    </script>
  30.  
     
  31.  
    <style></style>

子组件children.vue

  1.  
    <template>
  2.  
    <div>
  3.  
    <input type="text" v-model="childrenMessage">
  4.  
    <!--<button @click="childClick">传值给父组件</button>-->
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    name: "children",
  11.  
    props:{
  12.  
    message:String //接收父组件传过来的值,这是稍微高级一点的写法,也可以props:[' message']
  13.  
    },
  14.  
    data(){
  15.  
    return{
  16.  
    childrenMessage:''
  17.  
    }
  18.  
    },
  19.  
    created(){
  20.  
    this.childrenMessage=this.message //初始化时候的赋值
  21.  
    },
  22.  
    }
  23.  
    </script>
  24.  
     
  25.  
    <style scoped>
  26.  
     
  27.  
    </style>

上面是父组件传值给子组件的过程,最重要的点是props接收,上面是点击事件传值,还有一种场景是动态传值,实时更新父组件的值,自组件动态更新,这里就要用到watch了,附上自组件代码

子组件:watch监听法

  1.  
    <template>
  2.  
    <div>
  3.  
    <input type="text" v-model="childrenMessage">
  4.  
    <!--<button @click="childClick">传值给父组件</button>-->
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    name: "children",
  11.  
    props:{
  12.  
    message:String
  13.  
    },
  14.  
    data(){
  15.  
    return{
  16.  
    childrenMessage:''
  17.  
    }
  18.  
    },
  19.  
    created(){
  20.  
    this.childrenMessage=this.message
  21.  
    },
  22.  
     
  23.  
    //这里用watch方法来监听父组件传过来的值,来实现实时更新
  24.  
    watch:{
  25.  
    message(val){ //message即为父组件的值,val参数为值
  26.  
    this.childrenMessage = val //将父组件的值赋给childrenMessage 子组件的值
  27.  
    }
  28.  
    }
  29.  
     
  30.  
    }
  31.  
    </script>
  32.  
     
  33.  
    <style scoped>
  34.  
     
  35.  
    </style>

二、子组件传父组件,核心--$emit,这里附上完整父子传值的代码,vue是不允许子组件向父组件传值去改变父组件的值的,但是我们可以通过自定义事件的形式去改变值,例如点击事件,再通过$emit来传递,代码注释中有介绍。

父组件

  1.  
    <template>
  2.  
    <div>
  3.  
    <input type="text" v-model="inpMessage">
  4.  
    <button @click="handleClick">点击传给子组件</button>
  5.  
    //@messageData为子组件声明传递过来的值,函数,getData为函数,val参数是传递过来的值
  6.  
    <children :message="clickData" @messageData="getData"/>
  7.  
    </div>
  8.  
    </template>
  9.  
     
  10.  
    <script>
  11.  
    import children from './page/children'
  12.  
    export default {
  13.  
    name: "index",
  14.  
    components:{
  15.  
    children
  16.  
    },
  17.  
    data(){
  18.  
    return{
  19.  
    inpMessage:'',
  20.  
    clickData:''
  21.  
    }
  22.  
    },
  23.  
    methods:{
  24.  
    handleClick(){
  25.  
    this.clickData = this.inpMessage
  26.  
    },
  27.  
    //接收子组件传递的值,val参数是传递过来的值 ,给inpMessage 赋值,子组件改变父组件的值
  28.  
    getData(val){
  29.  
    this.inpMessage = val
  30.  
    console.log(val)
  31.  
    }
  32.  
    }
  33.  
    }
  34.  
    </script>
  35.  
     
  36.  
    <style></style>

子组件

  1.  
    <template>
  2.  
    <div>
  3.  
    <input type="text" v-model="childrenMessage">
  4.  
    <button @click="childClick">传值给父组件</button>
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    name: "children",
  11.  
    props:{
  12.  
    message:String
  13.  
    },
  14.  
    data(){
  15.  
    return{
  16.  
    childrenMessage:''
  17.  
    }
  18.  
    },
  19.  
    created(){
  20.  
    this.childrenMessage=this.message
  21.  
    },
  22.  
    methods:{
  23.  
    //点击传值给父组件,通过$emit传递,第一个参数messageData相当于传播的媒介,this.childrenMessage为需要传递的值,后面也可以传递多个参数
  24.  
    childClick(){
  25.  
    this.$emit('messageData',this.childrenMessage)
  26.  
    console.log(this.childrenMessage)
  27.  
    }
  28.  
    },
  29.  
    watch:{
  30.  
    message(val){
  31.  
    this.childrenMessage = val
  32.  
    }
  33.  
    }
  34.  
     
  35.  
    }
  36.  
    </script>