在Vue组件之间传值后阻止a链接跳转的方法

公司有一个特定场景：点击新闻列表中的某一项，然后在弹出框内展示新闻详情。即：新闻列表为父组件，弹框为子组件。内容详情以传值的方式给到子组件。但是内容中有很多a标签，点击后会直接跳转。业务逻辑需要阻止跳转使a链接失效

 

第一种方法： 在子组件内监听父组件传递过来的值。手动修改dom元素将a链接的onclick事件return flase

---

<template>
	<div class="c-s-box">
		<div class="c-s-title">新闻详情</div>
		<div class="c-d-content">
			<p class="new-c-title" v-text="propsObj.title"></p>
			<p class="new-c-summary" v-text="propsObj.summary"></p>
			<p class="new-c-content" v-html="propsObj.htmlContent"></p>
		</div>

	</div>
</template>

<script>
	import Vue from 'vue'
	
	export default {
		data() {
			return {

			}
		},
		methods: {
			preventAclick(){
				let aTagBox = window.document.getElementsByClassName("new-c-content")