vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit
2023-09-11 14:18:36 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!-- 父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用 --> <com1 v-bind:parentmsg="msg"></com1> </div> <script> // 创建 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 = '被修改了' } } } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <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> <script> // 定义了一个字面量类型的 组件模板对象 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 } }); </script> </body> </html>
props type类型有:
String
Number
Boolean
Object
Array
Function
相关文章
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- [Vue] Get up and running with vue-router
- vue.js3: 自定义video可拖动的进度条(vue@3.2.36)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue键盘事件:@keyup.down下方向键绑定事件
- vue事件修饰符:通过@click.prevent 阻止事件的默认行为
- [FE] jsoneditor 在 vue-router 和 vue-ssr 渲染下出现两个实例的问题
- standalone vue initialization process - Vue应用的初始化过程
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue实现文章内容过长点击阅读全文功能
- vue如何正确销毁当前组件的scroll事件?
- 229:vue+openlayers解决setText不能立即更新文字的问题
- 140:vue+openlayers 右键点击定位,获取某一点下多层features信息
- vue父组件传值和子组件触发父组件方法
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(三)双向绑定、监视函数、事件修饰符、双向绑定原理
- vue监听手机键盘搜索事件
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue自定义指令实现图片懒加载
- 【三十天精通 Vue 3】 第四天 Vue 3的模板语法详解
- vue实现点击改变颜色
- Vue: vue-router路由
- Vue:第一个vue-cli项目
- Vue双向绑定及Vue组件