vue基础----组件通信（props,$emit,$attrs,$listeners）
一、父传子，子传孙
1. props
1>在父组件中通过子组件自定义的标签属性来传递数据。
2>在子组件中通过props声明希望用到的数据
<body>
<div id="app">
<my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello yilia"
},
methods:{
fn(){
console.log("father");
}
},
components:{
"my-father":{
// props:['msg1'],
// template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
created(){
console.log(this.$attrs);
console.log(this.$listeners);
console.log(this); },
template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
data(){
return { }
},
components:{
"my-son":{
props:['msg1'],
template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
inheritAttrs:true,
data(){
return{
}
}
}
}
}
}
}); </script> </body>
1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据
props: {
a: {
type: Number,
default: 10
},
b: {
type: String,
validator(val) {
return val>0; // "2">0
}
},
arr: {
type: Array,
//假如属性是数组或对象 默认值需要通过函数返回
default:()=>([1])
}
},
2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"
this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)
<body>
<div id="app">
<my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello Yilia"
},
methods:{
fn(){
console.log("father");
}
},
components:{
"my-father":{
// props:['msg1'],
template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
data(){
return {
}
},
components:{
"my-son":{
props:['msg1'],
template:`<p>{{msg1}}</p>`,
inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
data(){
return{
}
}
}
}
}
}
});
</script>
</body>
二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)
1.需要添加修饰符native,不添加就被当作一个属性对待
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<my-button @click.native="fn"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
methods:{
fn() {
console.log("fn() is called");
}
},
components: {
"MyButton": {
template: `
<div>
点我
</div>`
}
}
});
</script>
</body>
点击 “点我” 的时候父组件的fn函数被调用。
2.$listeners 绑定所有的方法，直接调用父组件的方法
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<my-button @click="fn"></my-button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
methods:{
fn() {
console.log("fn() is called");
}
},
components: {
"MyButton": {
mounted(){
console.log(this.$listeners);
//{click: ƒ}
},
template: `<div @click="$listeners.click()">点我</div>`
}
}
});
</script>
</body>
3.子组件想调用父组件的方法 $emit
<body>
<div id="app">
<!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
<!--<my-button @click.native="fn"></my-button>-->
<my-button @click="fn" @mouseup="fn"></my-button>
</div>
<script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
<script>
// 组件通信 props $emit $attrs $listeners
/*
子如何传父
1 在子组件中调用$emit()方法发布一个事件
2 在父组件中提供一个在子组件内部发布的事件处理函数
3 在父组件订阅子组件内部发布的事件
*/
let vm = new Vue({
el: "#app",
data: {
content: "点我"
},
methods:{
fn(num) {
console.log(num,"fn() is called");
}
},
components: {
"MyButton": {
mounted() {
console.log(this.$listeners);// 绑定所有的方法
},
template: `
<div>
<button @click="$listeners.click(123);">点我</button>
<button @click="$emit('click2',23)">点我</button>
<button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
<button v-on="$listeners" >点我</button>
</div>
`
}
}
});
</script>
</body>
vue基础----组件通信（props,$emit,$attrs,$listeners）的更多相关文章
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- vue基础----组件通信（$parent,$children）
1.按照dom的父子级关系,在子组件中可以通过$parent 直接调用父组件的方法,也可得到父组件的属性. 2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法 ...
- vue 父子组件通信-props
父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...
- Vue 兄弟组件通信（不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...
随机推荐
- 蓝桥杯-PREV31-小朋友排队
解法: 这题有点像冒泡排序,但是做这题并不需要冒泡排序. 假设第i个小朋友比第j个小朋友高,而且i < j 为了把队伍排成从小到大,第i个小朋友一定要去第j个小朋友的右边.又因为只能交换位置相邻 ...
- python与模块的导入方式
今日所得 模块 import from...import... 循环导入 相对导入 绝对导入 软件开发目录规范 模块 模块:是一系列功能的集合体 模块的三种来源:1.内置模块(Python解释器自带的 ...
- phpcms数组处理后键值插入（php自带库函数）和自己处理办法比较。
phpcms处理: public function insert($data, $table, $return_insert_id = false, $replace = false) { if(! ...
- golang seelog使用
golang中自带的有log包,但是功能并不能满足我们.很多人推荐seelog,我们今天一起学习下. 安装 go get github.com/cihub/seelog 快速开始 引用seelog w ...
- 使用mybatis的动态sql解析能力生成sql
需求: 计算平台,有很多表,打算提供一个基于sql的服务接口, sql不能完全在配置页面写死, 要能根据参数不同执行不同的语义,防止sql个数爆炸 把mybatis原码down下来, 改造一下测试用例 ...
- 关闭”xx程序已停止工作”提示窗口
运行注册表编辑器,依次定位到HKEY_CURRENT_USER＼Software＼Microsoft＼Windows＼WindowsError Reporting,在右侧窗口中找到并双击打开Donts ...
- awk使用和详解
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...
- kendoUI 免费部分开发部分经验。
kendo分多个版本,核心UI免费版.NET,JAVA,PHP对应的前后端开发版. 基础免费版开放的UI经多个测试,与收费封装的UI并无区别,收费版提供了后端代码和前端封装语法,使不懂JS前端的也可简 ...
- mysql报错2003 ，can't connect to mysql server on “localhost”
我在安装成功后启动MySQL服务时,服务启动不了,提示:MySQL服务无法启动 服务没有报告任何错误 请键入NET HELPMSG 3534 以获得更多帮助,如下: 解决方案:安装好MySQL后 ...
- jdk源码理解-String类
String类的理解 简记录一下对于jdk的学习,做一下记录,会持续补充,不断学习,加油 1.String的hash值的计算方法. hash值的计算方法多种多样,jdk中String的计算方法如下,比 ...