vue父子组件传值以及slot简单使用

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