在vue2中，父组件引入子组件，子组件在引入父组件

在Vue2中，父组件引入子组件，可以使用Vue的组件化开发方式，通过`import`语句引入子组件，再在父组件的`components`属性中注册子组件，然后在父组件的模板中使用子组件即可。而在子组件中引入父组件，则可以通过`this.$parent`来访问父组件实例的属性和方法。

以下是一个示例代码：

// 子组件 ChildComponent.vue
<template>
  <div>
    <h2>这是子组件</h2>
    <p>{{message}}</p>
    <button @click="handleClick">点击触发父组件事件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      this.$emit('child-event') // 触发自定义事件
    }
  }
}
</script>


// 父组件 ParentComponent.vue
<template>
  <div>
    <h1>这是父组件</h1>
    <child-component @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent() {
      console.log('子组件事件被触发了')
    }
  }
}
</script>

在上面的示例代码中，父组件`ParentComponent.vue`中引入了子组件`ChildComponent.vue`，并在父组件的模板中使用了子组件。而在子组件中，我们通过`this.$emit()`方法触发了一个自定义事件，并在父组件中通过`@child-event`监听到了该事件，从而触发了父组件中的方法`handleChildEvent()`。这样就实现了从子组件向父组件通信的功能。

如果你想在子组件中访问父组件的属性和方法，可以使用`this.$parent`来获取父组件实例。例如，如果想在子组件中调用父组件的一个方法`parentMethod()`，可以这样写：

// 子组件 ChildComponent.vue
<template>
  <div>
    <h2>这是子组件</h2>
    <p>{{message}}</p>
    <button @click="handleClick">调用父组件方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    handleClick() {
      this.$parent.parentMethod() // 调用父组件方法
    }
  }
}
</script>


// 父组件 ParentComponent.vue
<template>
  <div>
    <h1>这是父组件</h1>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('我是父组件方法')
    }
  }
}
</script>

在上面的示例代码中，我们在子组件的方法`handleClick()`中通过`this.$parent.parentMethod()`调用了父组件的方法`parentMethod()`。注意，如果你需要在子组件中频繁访问父组件的属性和方法，建议将它们作为props传递给子组件，这样更加方便和可维护。