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 相关文章推荐
javascript 写类方式之二
Jul 05 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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中取得URL的根域名的代码
2011/03/23 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
JavaScript静态的动态
2006/09/18 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
python读写LMDB文件的方法
2018/07/02 Python
总结python中pass的作用
2019/02/27 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
军训自我鉴定怎么写
2014/02/13 职场文书
拔河比赛口号
2014/06/10 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
Python中异常处理用法
2021/11/27 Python