用vue中组件通信,写一个tab选卡.更容易知道组件的通信
首先知道
**
父子的通信**
1.父子通信是在****父组件中定义自定义属性,在组件通过props来接受
.子父通信
在父组件定义自定义事件，在子组件用$emit,来监听自定义的事件，
在根组件，使用定义的方法
子组件给父组件传递数据
自定义事件
子组件用 $emit() 来触发事件 ，父组件用 v-on来 监听子组件的事件 。
第一步：自定义事件
第二步： 在子组件中用$emit触发事件。第一个参数是事件名，后边的参数是要传递的数据
第三步：在自定义事件中用一个参数来接收
<!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>
<style>
span {
width: 60px;
height: 20px;
display: inline-block;
}
.tenshu {
width: 100px;
}
.active {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--
在组件中调用方法
组件可以调用多次
-->
<!-- 在父组件传自定义属性 在父组件绑定自定义的事件 @getbian="change" 左边是事件,右边是方法-->
<my-hello aa="bb" :id="ids" :list="arr" @cha="change"></my-hello>
<h1>选择的页面:<span class="tenshu" v-text="arr[ids-1].title"></span></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 注册一个全局的组件
/*
子传父,是通过props来传替的
在父组件中定义
(自定义属性,自定义方法),通过props传过去
*/
Vue.component('my-hello', {
// key value的形式 props是可以放多个自定义属性
props: {
// 自定义属性 aa相当于string
aa: {
type: String,
required: true
},
// Invalid prop: type check failed for prop "id".
// Expected String with value "1", got Number with value 1. 应该是number的类型而不是字符串类型
id: {
type: Number,
// 非必传
required: false,
// 不传,用默认的
default: '2',
},
list:{
type: Array,
required: true
}
},
template: `
`,
methods: {
// [Vue warn]: Invalid handler for event "cli": got undefined 没有这个事件
dianji(item) {
/* Error in v-on handler: "ReferenceError: cha is not defined"
found in
这里是传自定义的事件 this.$emit(cha) 这种是错误的
*/
// 接受父的自定义事件
// 子组件可以传数据
var args=Math.random();
this.$emit('cha',item,1,2,3,4,5,args);
}
}
})
var vm = new Vue({
el: '#app',
// 声明式变量
data: {
ids: 1,
value: 1,
arr: [
{ id: 1, title: '首页' },
{ id: 2, title: '详情页' },
{ id: 3, title: '关于页' },
{ id: 4, title: '列表页' },
]
},
methods:{
change(item,a,b,c,d,e,f){
this.ids=item.id
console.log('点击了',a,b,c,d,e,f)
}
}
// data(){
// return{
// arr:[
// {id:1,title:'首页'},
// {id:2,title:'详情页'},
// {id:3,title:'关于页'},
// {id:4,title:'列表页'},
// ]
// }
// },
})
// 计算属性要有返回值,必须要有return
/* 监听器
计算属性 computed 响应式原理 是依靠缓存的最新的数据 结果的系统
watch做表单的变化 监听数据的变化,做一些逻辑的变化
计算属性:依靠Vue响应式系统
变化响应式的最小值
使用ref可以获取真实的dom节点
和$ 的value都是真实的节点
操作dom消耗性能
操作dom有3种方法
js jq ref
*/
</script>
</body>
</html>