vue 父子组件（个人笔记）

目录

父组件使用子组件

父子组件之间传参

props——子获父

$ref ——子获父

this.$parent——子获父

$emit——父获子，使用this.$emit(‘自定义事件名’,所需要传的值)

this.$children——父获子

父组件使用子组件

        父组件

<template>
  <div>
    <h3>关于父子组件</h3>
    <div>这里是父组件</div><br/>
    <!-- 使用子组件 -->
    <Child></Child>
  </div>
</template>
<script>
import Child from '../components/Child.vue' // 引入子组件
export default {
  components: { //声明子组件
    Child
  },
  data () {
    return {
      
    }
  }
}
</script>

        子组件

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

<script>
export default {
  name: 'Child',
}
</script>

        运行结果

父子组件之间传参

props——子获父

        1、静态参数

                父组件

<Child msg="这是父组件传给子组件的静态参数"></Child>

                子组件 

<template>
  <div>
    <h4>这里是子组件</h4>
    <div>{{msg}}</div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: { // 使用props接收参数
    msg: String
  }
}
</script>

                运行结果

         2、动态参数

                父组件

<template>
  <div>
    <h3>关于父子组件</h3>
    <div>这里是父组件</div><br/>
    <!-- 使用子组件 -->
    <Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg"></Child>
  </div>
</template>
<script>
import Child from '../components/Child.vue' // 引入子组件
export default {
  components: { // 声明子组件
    Child
  },
  data () {
    return {
      dynamicMsg: "这是父组件传给子组件的动态参数"
    }
  },
}
</script>

                子组件

<template>
  <div>
    <h4>这里是子组件</h4>
    <div>{{msg}}</div>
    <div>{{msgDynamic}}</div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: { // 使用props接收参数
    msg: String,
    msgDynamic: String
  }
}
</script>

                运行结果

$ref ——子获父

        父组件

<button @click="getChildMsg">父组件传数据给子组件</button>
<Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg" ref="childRef"></Child>


methods: {
      getChildMsg: function() {
          this.$refs.childRef.childFn('这是父组件通过ref传过来的信息')
      }
 }

        子组件

methods: {
    childFn: function(msg) {
      console.log(msg);
    }
  }

        运行结果

this.$parent——子获父

在子组件中根据需要使用this.$parent.XXX获取

$emit——父获子，使用this.$emit(‘自定义事件名’,所需要传的值)

         父组件

<Child msg="这是父组件传给子组件的静态参数" :msg-dynamic="dynamicMsg" ref="childRef" @childBtn="clickBtn"></Child>


clickBtn: function(msg) {
          console.log(msg);
      }

        子组件

<button @click="childToFather">子组件把数据传给父组件</button>


childToFather: function() {
      this.$emit('childBtn', '这是子组件通过$emit传过来给父组件的')
}

        运行结果

this.$children——父获子

在父组件中根据需要的数据使用this.$children.XXX获得