Vue父子模版传值及组件传值的三种方法


Posted in Javascript onNovember 27, 2017

这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档

vue2.0 http://vuefe.cn/guide/

vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html

第一种

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //向子组件传递数据
  //省略extend方法,vue内部调用
  Vue.component('my-component', {
    //模板里不支持驼峰的属性写法,需要转换为‘-'连接的属性写法
    data:function(){
      return{
        parentMsg: '雨歇微凉'
      }
    },
    template: '<div>'
        +'<input v-model="parentMsg">'
        +'<br>'
        +'<child-component :my-message="parentMsg"></child-component>'
        +'</div>',
    components: {
      'child-component': {
        props: ['myMessage'],
        template: '<div>{{myMessage}}</div>'
      }
    }
  });
  // 创建根实例1
  new Vue({
    el: '#example'
  });
</script>

有什么疑惑的,也可以去查官网的文档,prop传值,这里也可以直接拷去试,如果你有什么更好的简介,还希望能够拿出来分享。

第二种

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //向子组件传递数据
  //省略extend方法,vue内部调用
  Vue.component('my-component', {
    data:function(){
      return {
        name:'xiaoming',
        age:20
      }
    },
    //模板里不支持驼峰的属性写法,需要转换为‘-'连接的属性写法
    template: '<div >{{name}}Parent</div><child1-component v-bind:msg-name="name"></child1-component>',
    components: {
      'child1-component': {
        // 声明 props
        props: ['msgName'],
        template: '<div>A child-111111 component!{{msgName}}</div>'
      }
    }
  });
  // 创建根实例1
  new Vue({
    el: '#example'
  });
</script>

第三种

<div id="example">
  <my-component></my-component>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  //向子组件传递数据
  //省略extend方法,vue内部调用
  Vue.component('my-component', {
    data:function(){
      return {
        name:'xiaoming',
        age:20
      }
    },
    //模板里不支持驼峰的属性写法,需要转换为‘-'连接的属性写法
    template: '<div >{{name}}Parent</div><child1-component some="1 + 1"></child1-component><child2-component :some="1 + 3"></child2-component>', 
    components: {
      'child1-component': {
        // 声明 props
        props: ['some'],
        template: '<div>{{some}}</div>',
        ready:function(){
          console.log(this.some)
        }
      },
      'child2-component': {
        // 声明 props
        props: ['some'],
        template: '<div>{{some}}</div>',
        ready:function(){
          console.log(this.some)
        }
      }
    }
  });
  // 创建根实例1
  new Vue({
    el: '#example'
  });
</script>

这个例子主要是说明带冒号和不带冒号的区别,不带冒号就是一个字符串死值,带冒号会到父模版的data中去寻找值的具体内容。

总结

以上所述是小编给大家介绍的Vue父子模版传值及组件传值的三种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 #Javascript
You might like
人大复印资料处理程序_输入篇
2006/10/09 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php实现的ping端口函数实例
2014/11/12 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python变量访问权限控制详解
2019/06/29 Python
python 负数取模运算实例
2020/06/03 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
商务考察邀请函模板
2015/02/02 职场文书
学会感恩主题班会
2015/08/12 职场文书