vue中父子组件注意事项,传值及slot应用技巧


Posted in Javascript onMay 09, 2018

一.父子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件传值</title>
  <style> 
  </style>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root"> 
    <counter :count="0" @numberchange="handleChange"></counter>
    <counter :count="0" @numberchange="handleChange"></counter>
    <div>{{total}}</div> 
    <validate-content content="hello world"></validate-content>
  </div>
  <script> 
   //父组件向子组件传值用 props ,加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串 
   var counter = { //局部注册 
     props:['count'],
     data:function(){//在子组件中定义数据,data不能是对象,必须是一个函数。
       return {
         number:this.count
       }
     },
     template:'<div @click="handleClick2">{{number}}</div>',
     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:'<div >{{content}}</div>',
   }
   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>
  <div id="root"> 
    <child><p>Qin</p></child>
  </div>
  <script> 
   let child = {
     template :`<div>
           <p>hello world</p> 
        </div>`
   }
   var vm = new Vue({
     el:'#root',
     components:{
       child
     } 
   })
  </script>
</body>

打开查看器查看一下

vue中父子组件注意事项,传值及slot应用技巧

发现Qin不见了

<p>Qin</p>1

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

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

 我们加入插槽

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

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

vue中父子组件注意事项,传值及slot应用技巧

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

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

效果图

vue中父子组件注意事项,传值及slot应用技巧

具名插槽

 如果想使用多个插槽,我们先看看效果:

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

vue中父子组件注意事项,传值及slot应用技巧

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

我们修改代码如下:

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

vue中父子组件注意事项,传值及slot应用技巧 

可以看到显示正常了

总结

以上所述是小编给大家介绍的vue中父子组件注意事项,传值及slot应用技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue中的provide/inject的学习使用
May 09 #Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
You might like
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JavaScript访问样式表代码
2010/10/15 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
Vuex简单入门
2017/04/19 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python生成器以及应用实例解析
2018/02/08 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python PyQt5整理介绍
2020/04/01 Python
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
法人代表授权委托书
2014/04/08 职场文书
体育比赛口号
2014/06/09 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
庆祝教师节主题班会
2015/08/17 职场文书