【VueCli脚手架】——第六章slot插槽的使用

一、定义新的组件

      定义新的空的组件，名为FormHelper.vue

<template>
</template>
<script>
export default {
  data() {
    return {
    };
  }
};
</script>
<style scoped>
</style>

二、在App.vue中注册组件并使用

<template>
  <div id="app">
    <FormHelper>     
    </FormHelper>
  </div>
</template>
import FormHelper from "./components/FormHelper";

export default {
  name: "App",
  components: {
    FormHelper
  },
  data() {
    return {
      //title: "这个是title"
    };
  },
  methods: {}
};

三、使用插槽

     如果从父组件向子组件中传普通属性值的话，可参考https://blog.csdn.net/tangdaren2/article/details/107149554

     如果从父组件向子组件传递标签信息的话，就需要使用插槽了。

     方法如下：在App.vue中

<template>
  <div id="app">
    <FormHelper>
      <h2 slot="title">123</h2>
      <p slot="text">这个是文本内容</p>
    </FormHelper>
  </div>
</template>

  在FormHelper.vue中

<template>
  <div>
    <slot name="title"></slot>
    <h1>fasdfsadfsdfsad</h1>
    <slot name="text"></slot>
  </div>
</template>

四、运行并访问

五、给父组件的标签加样式

    在父组件中给h2加样式

<style scoped>
h2 {
  background: lightgreen;
}
</style>

 效果如下：

注销App.vue中的样式，在子组件中给h2添加样式

h2 {
  background: lightblue;
}

 效果如下：

说明在子、父组件给标签添加样式效果是一样的。

六、在父组件传递的标签页中传递值

  在App.vue中添加如下代码，传递一个title值

<template>
  <div id="app">
    <FormHelper>
      <h2 slot="title">{{title}}</h2>
      <p slot="text">这个是文本内容</p>
    </FormHelper>
  </div>
</template>

<script>
import FormHelper from "./components/FormHelper";
export default {
  name: "App",
  components: {
    FormHelper
  },
  data() {
    return {
      title: "这个是title"
    };
  },
  methods: {}
};

在页面中效果如下，说明传递成功

如果在子组件FormHelper.vue中定义这个title值，则页面报错，说明不能在子组件中定义从父组件中传递过来的标签中的属性。