vue父子组件传值及slot应用步骤详解

来源：动视网责编：小采时间：2020-11-27 19:47:53

vue父子组件传值及slot应用步骤详解

vue父子组件传值及slot应用步骤详解:这次给大家带来vue父子组件传值及slot应用步骤详解，vue父子组件传值及slot应用的注意事项有哪些，下面就是实战案例，一起来看一下。一.父子组件传值<!DOCTYPE html> <html lang="en"> <head> <

推荐度：

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

导读vue父子组件传值及slot应用步骤详解:这次给大家带来vue父子组件传值及slot应用步骤详解，vue父子组件传值及slot应用的注意事项有哪些，下面就是实战案例，一起来看一下。一.父子组件传值<!DOCTYPE html> <html lang="en"> <head> <

这次给大家带来vue父子组件传值及slot应用步骤详解，vue父子组件传值及slot应用的注意事项有哪些，下面就是实战案例，一起来看一下。

一.父子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>父子组件传值</title>
 <style> 
 </style>
 <script src="./vue.js"></script>
</head>
<body>
 <p id="root"> 
 <counter :count="0" @numberchange="handleChange"></counter>
 <counter :count="0" @numberchange="handleChange"></counter>
 <p>{{total}}</p> 
 <validate-content content="hello world"></validate-content>
 </p>
 <script> 
 //父组件向子组件传值用 props ,加：号后传递的为js表达式,示例中则为数字，不加:号代表的是字符串 
 var counter = { //局部注册 
 props:['count'],
 data:function(){//在子组件中定义数据，data不能是对象,必须是一个函数。
 return {
 number:this.count
 }
 },
 template:'<p @click="handleClick2">{{number}}</p>',
 methods:{
 handleClick2:function(){
 this.number ++;
 //this.count++; 父组件可以传值给子组件,但子组件不可以修改父组件属性,这里这么写会报错。
 this.$emit("numberchange",this.number);//子组件向父组件传递事件,值
 }
 } 
 }
 var validateContent = {
 props:{
 //content:[Number,String] //组件参数校验，可以多选
 content:{//组件参数校验
 type:String,
 required:true,
 default:"default value",
 validator:function(value){
 return value.length > 5
 }
 }
 },
 template:'<p >{{content}}</p>',
 }
 var vm = new Vue({
 el:'#root',
 data:{
 total:0
 },
 methods:{ 
 handleChange:function(number){ 
 console.log(number)
 // this.total +=1;
 }
 },
 components:{
 counter, //局部注册要在根节点注册组件
 validateContent
 }
 })
 </script>
</body>
</html>

二.父组件向子组件传递DOM

先看一个示例

<body>
 <p id="root"> 
 <child><p>Qin</p></child>
 </p>
 <script> 
 let child = {
 template :`<p>
 <p>hello world</p> 
 </p>`
 }
 var vm = new Vue({
 el:'#root',
 components:{
 child
 } 
 })
 </script>
</body>

打开查看器查看一下

发现Qin不见了

<p>Qin</p>1

查看官方文档 , https://cn.vuejs.org/v2/guide/components-slots.html

我们得出结论：如果 child 没有包含一个 < slot > 元素，则任何传入它的内容都会被抛弃

我们加入插槽

<body>
 <p id="root"> 
 <child><p>Qin</p></child>
 </p>
 <script> 
 let child = {
 template :`<p>
 <p>hello world</p>
 <slot></slot>
 </p>` 
 }
 var vm = new Vue({
 el:'#root',
 components:{
 child
 } 
 })
 </script>
</body>

发现Qin能正常显示，且slot将会被替换为解析后的片段 < p > Qin < /p >

当父组件不向子组件传值的时候，slot还可以作为父组件默认值出现

<body>
 <p id="root"> 
 <child></child>
 </p>
 <script> 
 let child = {
 template :`<p>
 <p>hello world</p>
 <slot>default value</slot>
 </p>`
 }
 var vm = new Vue({
 el:'#root',
 components:{
 child
 } 
 })
 </script>
</body>

效果图

具名插槽

如果想使用多个插槽，我们先看看效果：

<body>
 <p id="root"> 
 <child>
 <header>This is header</header>
 <footer>This is footer</footer> 
 </child>
 </p>
 <script> 
 let child = {
 template :
 `<p> 
 <slot></slot>
 <p>Main content</p>
 <slot></slot>
 </p>`
 }
 var vm = new Vue({
 el:'#root',
 components:{
 child
 } 
 })
 </script>
</body>

发现出现了多个header和footer，要解决这个问题就要用到具名插槽

我们修改代码如下：

<body>
 <p id="root"> 
 <child>
 <header slot="header">This is header</header>
 <footer slot="footer">This is footer</footer> 
 </child>
 </p>
 <script> 
 let child = {
 template :
 `<p> 
 <slot name="header"></slot>
 <p>Main content</p>
 <slot name="footer"></slot>
 </p>`
 }
 var vm = new Vue({
 el:'#root',
 components:{
 child
 } 
 })
 </script>
</body>

可以看到显示正常了

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

vue父子组件传值及slot应用步骤详解

推荐度：

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

标签：使用 VUE 教程

热门焦点

vue父子组件传值及slot应用步骤详解

vue父子组件传值及slot应用步骤详解

vue父子组件传值及slot应用步骤详解

最新推荐

猜你喜欢

热门推荐