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计算页面刷新的次数
Jul 20 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
js中less常用的方法小结
Aug 09 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 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
php中的登陆login
2007/01/18 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
解析js如何获取css样式
2016/12/11 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python编写登陆接口的方法
2017/07/10 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
母校寄语大全
2014/04/10 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
安全月活动总结
2014/05/05 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
英语系毕业生求职信
2014/07/13 职场文书
迁户口计划生育证明
2014/10/19 职场文书
幼儿园见习总结
2015/06/23 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript