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选项声明它预期的数据 ...
随机推荐
- python练习题——猜数字游戏
增加了按照对半找数的方法来计算最短几次就可以猜到随机数,决定到游戏结束共猜数的次数: from random import * import numpy as np from numpy import ...
- [LC] 152. Maximum Product Subarray
Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...
- highcharts 柱状图在柱子顶部显示y轴数据
var plotOptions={ column:{ //borderColor: "#CCCC66",//边框 shadow: true, //阴影 dataLabels:{ / ...
- 细看Java序列化机制
概况 在程序中为了能直接以 Java 对象的形式进行保存,然后再重新得到该 Java 对象,这就需要序列化能力.序列化其实可以看成是一种机制,按照一定的格式将 Java 对象的某状态转成介质可接受的形 ...
- Android Studio调用系统隐藏接口EthernetManager
google source签名文件参考:https://android.googlesource.com/platform/build/+/donut-release/target/product/s ...
- 吴裕雄--天生自然HTML学习笔记：HTML 表单和输入
HTML 表单用于收集不同类型的用户输入. <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- linux服务器项目部署
重启服务器 :reboot C:\Users\maple>mysql -u root -pEnter password: ******mysql> use test;Database ch ...
- PHP 全局使用 Laravel 辅助函数 dd
dump() 方法 全局 composer.json 12345 "require": { "squizlabs/php_codesniffer": " ...
- Tp5安全篇入门
输入安全 设置public目录为唯一对外访问目录,不能把资源文件放入到应用目录: 使用框架提供的请求变量获取方法(Request类的param方法及input助手函数)而不是原生系统变量获取用户输入的 ...
- 什么是AWVS
什么是AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,现已更新到10.(下 ...