vue父子组件slot插槽的使用_vue.js_

vue父子组件slot插槽

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

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

这是创建子组件

var testzujian = {         template:`
             这是子组件的内容                
`     }

这是注册子组件

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

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

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

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

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

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

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

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

这个标签里面就用来添加

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

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

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

var testzujian = {         template:`
             这是子组件的内容                                           
`     }

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

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

// 子组件代码 

//父组件代码 

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

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！