父组件向子组件传值

父组件向子组件传值

利用v-bind的来传值

父组件

<template>
  <div id="app">
    <child-component v-bind:dataOfChild="dataOfParent"></child-component>
  </div>
</template>

<script>
  import childComponent from './components/childComponent'

  export default {
    name: 'App',
    data(){
      return {
        dataOfParent:'1111111111'
      }
    },
    components:{
      childComponent
    },
  }
</script>

复制代码

子组件

<script>
export default {
  name: 'childComponent',
 //子组件通过props来接收父组件传来的值
 props:{
    //还可设置传递过来的类型和默认值等(此例子中规定默认值为：默认值,类型为String)
     'dataOfChild':{
         default:'默认值',
         type:String
     }
 }
}
</script>
复制代码

父组件向子组件传值(利用v-bind来传值)

v-bind:dataOfChild = "dataOfParent"（传递） =========>   props:{'dataOfChild'}（接收）
复制代码

子组件向父组件传值

子组件

<template>
  <div>
    <button @click="sendDataToParent">向父组件传值</button>
  </div>
</template>

<script>
  export default {
    name: 'childComponent',
    data(){
        return{
            childmsg:'我是子组件的值'
        }
    }
    methods:{
        sendDataToParent(){
            //$emit（even,value）even 是一个函数，value 是传给父组件的值
            this.$emit('parentFunction',this.childmsg)
        }
    }
  }
</script>
复制代码

父组件

<template>
  <div id="app">
    <!--监听子组件触发的parentFunction事件,然后调用customParentFunction方法-->
    <child-component v-on:parentFunction = "customParentFunction"></child-component>
  </div>
</template>

<script>
  import childComponent from './components/childComponent'

  export default {
    name: 'App',
    components:{
      childComponent
    },
    methods: {
        customParentFunction(msg){
            console.log('子组件传过来的值',msg)
        }
    }
  }
</script>
复制代码

子组件向父组件传值

(子组件)this.$emit('parentFunction',this.childmsg)
(父组件dom)v-on:parentFunction="customParentFunction"
(父组件JS)customParentFunction(msg){
    //msg就是子组件传递过来的数据
}
复制代码

本作品采用《CC 协议》，转载必须注明作者和本文链接