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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
js中匿名函数的创建与调用方法分析
Dec 19 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
js实现简单选项卡功能
Mar 23 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
原生js+css实现tab切换功能
Sep 17 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生成sitemap.xml地图函数
2013/11/13 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python中有趣在__call__函数
2015/06/21 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
计算机专业大学生的自我评价
2013/11/14 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
公司股份合作协议书
2014/12/07 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书