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 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
Node.js学习教程之Module模块
Sep 03 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
JS表单验证的代码(常用)
2016/04/08 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
node后端服务保活的实现
2019/11/10 Javascript
JS实现滑动插件
2020/01/15 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
tensorflow如何批量读取图片
2019/08/29 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python netmiko模块的使用
2020/02/14 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
C语言50道问题
2014/10/23 面试题
建筑班组长岗位职责
2014/01/02 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
服务行业口号
2014/06/11 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
三八妇女节慰问信
2015/02/14 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS