在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")
				let aTag = aTagBox[0].getElementsByTagName('a')
				for(let i = 0; i < aTag.length; i++){
					aTag[i].onclick = function(event) {
						event.preventDefault();
                                        // return false
                                        // 這兩個都可以阻止
					}
				}
				
			}
		},
		mounted() {
			this.preventAclick()
		},
		watch: {
			propsObj: {
				handler(){
					let page = this
                                    // 必須加一個定時器，不然獲取到的是上一次的值
					setTimeout(function(){
						page.preventAclick()
					}, 100)
				}
			}
		},
		props: {
			propsObj: {
				type: Object

			}
		}
	}
</script>

<style scoped>
	
</style>

第二種方法：  同樣是watch父組件傳遞的值，然後去遍歷內容的字符串，修改掉a鏈接的href值或者替換a標籤爲其他標籤