1.父组件将url传给自组件
<template>
<div>
<navigationlink :url="url">我是默认值</navigationlink>
</div>
</template>
<script>
import navigationlink from "./navigation-link";
export default {
name: "navigation",
data() {
return {
url: "http://www.baidu.com"
};
},
components: {
navigationlink
}
};
</script>
2.子组件通过props接受url
<template>
<div>
<a :href="url" class="nav-link">
<slot>我不是默认值</slot>
</a>
</div>
</template>
<script>
export default {
name: "navigationlink",
props: {
url: {}
}
};
</script>
3.效果
<template>
<div>
<navigationlink :url="url">我是默认值</navigationlink>
</div>
</template>
<script>
import navigationlink from "./navigation-link";
export default {
name: "navigation",
data() {
return {
url: "http://www.baidu.com"
};
},
components: {
navigationlink
}
};
</script>
4.去掉“我是默认值”
image.png
