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 相关文章推荐
javascript GUID生成器实现代码
Oct 31 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
js读取配置文件自写
Feb 11 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
微信小程序实现多图上传
Jun 19 Javascript
javaScript Array api梳理
Mar 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
PHP实现文件上传与下载
2020/08/28 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python 快速排序代码
2009/11/23 Python
Python去除列表中重复元素的方法
2015/03/20 Python
Python 多线程Threading初学教程
2017/08/22 Python
基于python生成器封装的协程类
2019/03/20 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python实现飞机大战项目
2020/03/11 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
R9700摩机记
2022/04/05 无线电