vue父子组件slot插槽的使用

目录 vue父子组件slot插槽 1.创建一个子组件并在vue实例中注册 2.在HTML代码中使用子组件 3.在vue实例中写入想要插入到子组件的内容 4.在子组件的模板中通过一个slot标签 vue插槽v-slot实现父向子传值

vue父子组件slot插槽

关于父组件在使用子组件的时候，向子组件插入内容的方法

1.创建一个子组件并在vue实例中注册

这是创建子组件

var testzujian = {
? ? ? ? template:`<div>
? ? ? ? ? ? <span>这是子组件的内容</span> ??
? ? ? ? ? ? </div>`
? ? }

这是注册子组件

let vm = new Vue({
?? ?el:'.root',
?? ? components:{
? ? ? ? ? ? testzujian:testzujian
? ? ? ? },
})

2.在HTML代码中使用子组件

<body>
? ? <div class="root">
? ? ? ? <testzujian></testzujian> ? ?
? ? </div>
</body>

3.在vue实例中写入想要插入到子组件的内容

let vm = new Vue({
? ? ? ? el:'.root',
? ? ? ? components:{
? ? ? ? ? ? testzujian:testzujian
? ? ? ? },
? ? ? ? template:`<div>
? ? ? ? ? ? <testzujian>
? ? ? ? ? ? ? ? <template v-slot:slotcontent>
? ? ? ? ? ? ? ? ? ? <span>这是父组件向子组件插入的内容</span> ? ?
? ? ? ? ? ? ? ? </template>?
? ? ? ? ? ? </testzujian>
? ? ? ? ? ? </div>`,
? ? })

其中template是一个模板字符串，这个模板字符串里面最外面的div标签是根目录，必须存在。

根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在

子组件标签之内的也是必须存在的

其上的属性v-slot绑定了一个名字slotcontent，这个名字可以随意取，但必须得有

这个标签里面就用来添加

父组件想要插入子组件的内容

4.在子组件的模板中通过一个slot标签

来引入父组件模板中内添加的内容

var testzujian = {
? ? ? ? template:`<div>
? ? ? ? ? ? <span>这是子组件的内容</span>
? ? ? ? ? ? <slot name="slotcontent">
? ? ? ? ? ? </slot> ? ?
? ? ? ? ? ? </div>`
? ? }

这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent

vue插槽v-slot实现父向子传值

// 子组件代码
<template>
  <div class="child">
    <h4>this is child component</h4>
    <p>收到来自父组件的消息：
      <slot name="child"></slot>  <!--展示父组件通过插槽传递的{{message}}-->
    </p>
  </div>
</template>

//父组件代码
<template>
  <div class="parent">
    <h3>this is parent component</h3>
    <input type="text" v-model="message" />
    <Child>
      <template v-slot:child>
        {{ message }}  <!--插槽要展示的内容-->
      </template>
    </Child>
  </div>
</template>

<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '内容',
    }
  },
  components: {
    Child,
  },
}
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue父子组件slot插槽的使用的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did122535

更新时间：2022-11-21 阅读：43次