Vue中占位符如何使用

来源：懂视网责编：小采时间：2020-11-27 19:55:48

Vue中占位符如何使用

Vue中占位符如何使用: 这次给大家带来Vue中占位符如何使用，Vue中占位符使用的注意事项有哪些，下面就是实战案例，一起来看一下。简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。也有人说：props可以将数据从父组件传入子组件，slo

推荐度：

点击下载本文 文档为doc格式

导读Vue中占位符如何使用: 这次给大家带来Vue中占位符如何使用，Vue中占位符使用的注意事项有哪些，下面就是实战案例，一起来看一下。简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。也有人说：props可以将数据从父组件传入子组件，slo

这次给大家带来Vue中占位符如何使用，Vue中占位符使用的注意事项有哪些，下面就是实战案例，一起来看一下。

简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。

也有人说：props可以将数据从父组件传入子组件，slot可以将html从父组件传入子组件。那么如何实现呢？

单个插槽：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="vue.min.js"></script>
 </head>
 <body>
 <p id="app">
 <h1>我是父组件的标题</h1>
 <my-component>
 <p>这是一些初始内容</p>
 <p>这是更多的初始内容</p>
 </my-component>
 </p>
 <script type="text/javascript">
 Vue.component('my-component', {
 // 有效，因为是在正确的作用域内
 template: '<p>\
 <h2>我是子组件的标题</h2>\
 <slot>只有在没有要分发的内容时才会显示。</slot>\
 </p>',
 data: function () {
 return {
 
 }
 }
 });
 new Vue({
 el:'#app',
 data:{
 msg:'你好啊'
 }
 })
 </script>
 </body>
</html>

组件中的模板中写入slot标签，在父级调用子组件的时候传入html即可。

具名插槽：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="vue.min.js"></script>
 </head>
 <body>
 <p id="app">
 <my-component>
 <h1 slot="header">这里可能是一个页面标题</h1>
 <p>主要内容的一个段落。</p>
 <p>另一个主要段落。</p>
 <p slot="footer">这里有一些联系信息</p>
 </my-component>
 </p>
 <script type="text/javascript">
 Vue.component('my-component', {
 // 有效，因为是在正确的作用域内
 template: '<p class="container">\
 <header>\
 <slot name="header"></slot>\
 </header>\
 <main>\
 <slot></slot>\
 </main>\
 <footer>\
 <slot name="footer"></slot>\
 </footer>\
 </p>',
 data: function () {
 return {
 
 }
 }
 });
 new Vue({
 el:'#app',
 data:{
 msg:'你好啊'
 }
 })
 </script>
 </body>
</html>

具名插槽，顾名思义当有多个slot标签时，你需要给他们起个自己的名字，在父组件调用时需要slot="内部的对应名字"，当存在没有命名的slot标签时，父级组件传入的默认html代码将全部输出在无名的slot标签中。

作用域插槽

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="vue.min.js"></script>
 </head>
 <body>
 <p id="app">
 <!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
 <child>
 <template scope="props">
 <span>hello from parent</span><br>
 <span>{{ props.text }}</span>
 </template>
 </child>
 </p>
 <script type="text/javascript">
 // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
 Vue.component('child',{
 template:'<ul>' +
 '<slot text="hello from child"></slot>' +
 '</ul>',
 data:function(){
 return {
 }
 },
 });
 new Vue({
 el:'#app',
 data:{
 msg:'你好啊'
 }
 })
 </script>
 </body>
</html>

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

其实就是相当于，在父组件中可以获取到子组件传递出来的props对象，从而渲染到父组件上。

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Vue中占位符如何使用

推荐度：

点击下载本文 文档为doc格式

标签： VUE 使用vue 占位符

热门焦点

Vue中占位符如何使用

Vue中占位符如何使用

Vue中占位符如何使用

最新推荐

猜你喜欢

热门推荐