vue-父子组件和ref实例详解


Posted in Javascript onNovember 10, 2019

父组件向子组件传值

<div id="app">
  <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 -->
  <com1 v-bind:parentmsg="msg"></com1>
 </div>
// 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    msg: '123 啊-父组件中的数据'
   },
   methods: {},
   components: {
    // 结论:经过演示,发现,子组件中,默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
    com1: {
     data() { // 注意: 子组件中的 data 数据,并不是通过 父组件传递过来的,而是子组件自身私有的,比如: 子组件通过 Ajax ,请求回来的数据,都可以放到 data 身上;
      // data 上的数据,都是可读可写的;
      return {
       title: '123',
       content: 'qqq'
      }
     },
     template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
     // 注意: 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的
     // props 中的数据,都是只读的,无法重新赋值
     props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据,只读,写的话会报警告
     directives: {},
     filters: {},
     components: {},
     methods: {
      change() {
       this.parentmsg = '被修改了'
      }
     }
    }
   }
  });

父组件向子组件传方法

<div id="app">
  <!-- 父组件向子组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了 -->
  <com2 @func="show"></com2>
 </div>
 <template id="tmpl">
  <div>
   <h1>这是 子组件</h1>
   <input type="button" value="这是子组件中的按钮 - 点击它,触发 父组件传递过来的 func 方法" @click="myclick">
  </div>
 </template>
 // 定义了一个字面量类型的 组件模板对象
  var com2 = {
   template: '#tmpl', // 通过指定了一个 Id, 表示 说,要去加载 这个指定Id的 template 元素中的内容,当作 组件的HTML结构
   data() {
    return {
     sonmsg: { name: '小头儿子', age: 6 }
    }
   },
   methods: {
    myclick() {
     // 当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func 方法,并调用这个方法???
     // emit 英文原意: 是触发,调用、发射的意思
     // this.$emit('func123', 123, 456)
     this.$emit('func', this.sonmsg)
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    datamsgFormSon: null
   },
   methods: {
    show(data) {
     // console.log('调用了父组件身上的 show 方法: --- ' + data)
     console.log(data);
     this.datamsgFormSon = data
    }
   },
   components: {
    com2
    // com2: com2
   }
  });

vue+本地存储实现评论功能

难道在于理解父组件向子组件传方法

<div id="app">
  <cmt-box @func="loadComments"></cmt-box>
  <ul class="list-group">
   <li class="list-group-item" v-for="item in list" :key="item.id">
    <span class="badge">评论人: {{ item.user }}</span>
    {{ item.content }}
   </li>
  </ul>
 </div>
 <template id="tmpl">
  <div>
   <div class="form-group">
    <label>评论人:</label>
    <input type="text" class="form-control" v-model="user">
   </div>
   <div class="form-group">
    <label>评论内容:</label>
    <textarea class="form-control" v-model="content"></textarea>
   </div>
   <div class="form-group">
    <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
   </div>
  </div>
 </template>
var commentBox = {
   data() {
    return {
     user: '',
     content: ''
    }
   },
   template: '#tmpl',
   methods: {
    postComment() { // 发表评论的方法
     // 分析:发表评论的业务逻辑
     // 1. 评论数据存到哪里去???  存放到了 localStorage 中 localStorage.setItem('cmts', '')
     // 2. 先组织出一个最新的评论数据对象
     // 3. 想办法,把 第二步中,得到的评论对象,保存到 localStorage 中:
     // 3.1 localStorage 只支持存放字符串数据, 要先调用 JSON.stringify 
     // 3.2 在保存 最新的 评论数据之前,要先从 localStorage 获取到之前的评论数据(string), 转换为 一个 数组对象, 然后,把最新的评论, push 到这个数组
     // 3.3 如果获取到的 localStorage 中的 评论字符串,为空不存在, 则 可以 返回一个 '[]' 让 JSON.parse 去转换
     // 3.4 把 最新的 评论列表数组,再次调用 JSON.stringify 转为 数组字符串,然后调用 localStorage.setItem()
     var comment = { id: Date.now(), user: this.user, content: this.content }
     // 从 localStorage 中获取所有的评论
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     list.unshift(comment)
     // 重新保存最新的 评论数据
     localStorage.setItem('cmts', JSON.stringify(list))
     this.user = this.content = ''
     // this.loadComments() // ?????
     this.$emit('func')
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    list: [
     { id: Date.now(), user: '李白', content: '天生我材必有用' },
     { id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
     { id: Date.now(), user: '小马', content: '我姓马, 风吹草低见牛羊的马' }
    ]
   },
   beforeCreate(){ // 注意:这里不能调用 loadComments 方法,因为在执行这个钩子函数的时候,data 和 methods 都还没有被初始化好
   },
   created(){
    this.loadComments()
   },
   methods: {
    loadComments() { // 从本地的 localStorage 中,加载评论列表
     var list = JSON.parse(localStorage.getItem('cmts') || '[]')
     this.list = list
    }
   },
   components: {
    'cmt-box': commentBox
   }
  });

ref获取DOM和组件

vue中如何操作DOM

<div id="app">
  <input type="button" value="获取元素" @click="getElement" ref="mybtn">
  <h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>
  <hr>
  <login ref="mylogin"></login>
 </div>
var login = {
   template: '<h1>登录组件</h1>',
   data() {
    return {
     msg: 'son msg'
    }
   },
   methods: {
    show() {
     console.log('调用了子组件的方法')
    }
   }
  }
  // 创建 Vue 实例,得到 ViewModel
  //vm中有一个属性叫ref
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    getElement() {
     // console.log(document.getElementById('myh3').innerText)
     // ref 是 英文单词 【reference】  值类型 和 引用类型 referenceError
     // console.log(this.$refs.myh3.innerText)
     console.log(this.$refs.mylogin.msg)
     this.$refs.mylogin.show()
    }
   },
   components: {
    login
   }
  });

总结

以上所述是小编给大家介绍的vue-父子组件和ref实例详解,希望对大家有所帮助!

Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
vue $set 给数据赋值的实例
Nov 09 #Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 #Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 #Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
PHP学习笔记之一
2011/01/17 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
动手学习无线电
2021/03/10 无线电
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
js数据类型检测总结
2018/08/05 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
Python实现八大排序算法
2016/08/13 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python 常用的基础函数
2018/07/10 Python
Python datetime模块使用方法小结
2020/06/18 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
商务日语专业毕业生求职信
2013/10/26 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
工程项目合作意向书
2015/05/08 职场文书
教师节班会主持词
2015/07/06 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android