vue -- watch侦听器与父子组件间通信

watch侦听器

方式一

1.默认有两个参数 newValue与oldValue
2.如果是对象类型那么拿到的是代理对象
如果要进行深度监听 需要加上
deep : true
如果想要第一次渲染直接执行一次监听器
immediate : true

Vue.toRaw 获取原始对象

        watch: {
          message(newValue, oldValue) {
            console.log("message数据发生变化", newValue, oldValue);
          },
          info(newValue, oldValue) {
            console.log(Vue.toRaw(newValue));
          },

方式二

使用this.$watch进行监听
1.第一个参数是要侦听的源
2.第二个参数是侦听的回调函数
3.第三个参数是额外的其他选项 如deep immediate

        created() {
          console.log("created");
          this.$watch(
            "message",
            (newValue, oldValue) => {
              console.log("message数据变化", newValue, oldValue);
            },
            { deep: true }
          );
        },

组件间的通信

父子组件间的通信方式

父组件传递给子组件 通过props
子组件传递给父组件 通过$emit触发

什么是props
props是你可以在组件上注册一些自定义的attribute
父组件给这些attribute赋值 子组件通过attribute的名称获取到对应的值

props 有两种常见的用法
方式一：字符串数组 数组中的字符串就是attribute的名称
方式二：对象类型 对象类型我们可以在指定attribute名称的同时 指定它需要传递的类型 是否是必须的 默认值等

props数组语法
弊端：1.不能进行类型检测 2.没有默认值

props: ["name", 'age', 'height']

props对象语法
对象类型的默认值要是函数

	props: {
		name: {
			type: String,
			default: '我是默认的name'
		},
		age: {
			type: Number,
			required: true,
			default: 0
		},
		height: {
			type: Number,
			default: 2
		},
		friend: {
			type: Object,
			default: () => ({ name: 'james' })

type的类型
String
Number
Boolean
Array
Object
Date
Function
Symbol

Props的大小写命名
HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符；
这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名)
命名；

对于非Prop的Attribute
什么是非Prop的Attribute
当我们传递给一个组件某个属性 当时该属性并没有定义对应的props或者emits时 就称为非Props的Attribute
常见的包括class style id属性等

如果当组件有单个根节点时 并且当前的属性是一个非props的attribute 那么该属性会默认添加到子组件的根元素上
如果我们不希望组件的根元素继承attribute 可以在组件中设置inheritAttrs:false

export default {
	inheritAttrs: false
}

禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素
我们可以通过$attrs来访问所有的非props的attribute

<div>
	非Prop的Attribute
	<h2 :class="$attrs.class"></h2>
</div>

多个根节点的attribute
多个根节点的attribute如果没有显示的绑定 那么会报警告 我们必须手动的指定要绑定到哪一个属性上

<template>
	<div :class="$sttrs.class">非Prop的Attribute1</div>
	<div>非Prop的Attribute2</div>
</template>

子组件传递给父组件

什么情况下子组件需要传递内容给父组件的？
1.当子组件有一些事件发生的时候 比如在组件中发生了点击 父组件需要切换内容
2.子组件有一些内容想要传递给父组件的时候

如何完成上述操作
1.在子组件中定义好在某些情况下触发的事件名称
2.在父组件中以v-on的方式传入要监听的事件的名称 并且绑定到对应的方法中
3.在子组件中发生某个事件的时候 根据事件名称触发对应的事件

emits数组写法

emits:['add']

emits的对象写法 对传递的参数进行验证 很少用

emits:{
	add:function(count){
		if(count <= 10){
			return true	
		}
		return false
	}
}

自定义事件的时候 我们也可以传递一些参数给父组件
第一个参数 自定义的事件名称
第二个参数 传递的参数

		btnClick(count) {
			this.$emit('add', count)
		}

在vue3中我们可以对传递的参数进行验证

emits:{
	addOne:null;
	addTen:function(playload){
		if(playload === 10){
			return true	
		}
		return false
	}
}

综合案例 点击按钮数字加加

<template>
	<div class="app">
		<h2>当前计数 :{{counter}}</h2>
		<!-- 自定义add-counter 并监听内部add事件 -->
		<add-counter @add="addBtnClick"></add-counter>
	</div>
</template>

<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
export default {
	data() {
		return {
			counter: 0
		}
	},
	components: {
		AddCounter,
		SubCounter,
	},
	methods: {
		addBtnClick(count) {
			this.counter += count
		},
		subBtnClick(count) {
			this.counter += count
		}
	}
}
</script>

<template>
	<div class="add">
		<button @click="btnClick(1)">+1</button>
		<button @click="btnClick(5)">+5</button>
		<button @click="btnClick(10)">+10</button>
	</div>
</template>

<script>
export default {
	emits: {
		add: function (count) {
			if (count <= 10) {
				return true
			}
			return false
		}
	},
	methods: {
		btnClick(count) {
			this.$emit('add', count)
		}
	}
}
</script>