vue2系列2-常用指令,组件通信,插槽,事件计算属性和监听器
个人学习和记录,如有错误欢迎指正
一、vue2常用指令
v-for: 循环数组
v-if:dom节点删除添加
v-else-if :与v-if配合使用
v-else :必须与v-if配合使用
v-show:dom节点隐藏显示
v-cloak:样式[v-cloak]:display:none,可以隐藏未解析的模版
v-pre:不要解析该节点
v-text:替换节点的文本内容
v-html:替换节点的html内容包括文本,实际chrom中,为了安全不可以用。
v-once:只解析动态模版一次,数据在变化,不会再次解析模版,用于优化性能
v-for 的优先级比 v-if 更高
二、vue2组件通信
1.父子通信
1、prop
2、$ on绑定$ emit
3、v-model
4、$ refs
5、$ parent
6、$ childen
2.父孙通信
1、$ attrs
2、$ listeners
2、provide和inject
3、兄弟通信
全局事件总线
全部代码如下:
父组件
<template>
<div id="app">
我是父组件
<ChildA @change="getToyBySon" a='我是父组件的a' b="我是父组件的b" ref="c2"></ChildA>
<ChildB ref="c1" @change="getToyByChild"/>
<ChildC v-model="inputValue" :name1.sync="name1" :name2.sync="name2"/>
<button @click="getRef($refs)">获取ref</button><br>
<button @click="getChild($children)">获取Children</button><br>
<button @click="func1();func2()">绑定多个事件</button>
</div>
</template>
<script>
import ChildA from './components/ChildA.vue'
import ChildB from './components/ChildB.vue'
import ChildC from './components/ChildC.vue'
export default {
name: 'App',
components: {
ChildA,
ChildB,
ChildC
},
data() {
return {
msg: 'hhahah',
inputValue: '我是父元素给的input值',
name1: '父元素name1',
name2: '父元素name2'
}
},
provide() {
return {
age: '我是父组件传递的age'
}
},
methods:{
getToyByChild(val) {
console.log(val)
},
getToyBySon(val) {
console.log(val)
},
getRef(refs) {
console.log(refs)
refs.c1.name= '哈哈哈哈哈哈哈哈'
},
getChild(child) {
console.log(child)
},
func1() {
console.log('func1')
},
func2() {
console.log('func2')
}
}
}
</script>
子组件A
<template>
<div>
<p @click="sendToy" >child2</p>
<SonA v-bind="$attrs" v-on="$listeners"></SonA>
{{a}}
</div>
</template>
<script>
import SonA from './SonA'
export default {
name: 'ChildA',
components: {
SonA
},
mixins: [],
props: ['a'],
data() {
return {
}
},
computed: {
},
created() {
this.$bus.$on("getCar",this.getCar)
},
beforeDestroy() {
this.$bus.$off('getCar')
},
watch: {
},
mounted() {
},
methods: {
getCar(val) {
console.log(val)
},
sendToy() {
this.$emit("change", '洋娃娃2')
}
}
};
</script>
子组件B
<template>
<div class="child">
我是子组件B
{{name}}
<h1>{{ value }}</h1>
<h1>{{ msg }}</h1>
<button @click="sendCar">给兄弟传递数据</button>
</div>
</template>
<script>
export default {
name: 'ChildB',
props: {
msg: String,
value: String,
},
data() {
return {
name:'子组件childB的名字'
}
},
methods: {
getToy(val) {
console.log(val)
},
sendCar() {
this.$bus.$emit("getCar", "我是子组件B给的car")
}
},
}
</script>
C组件
<template>
<div>
我是子组件C专门演示v-model
<!-- 基础用法
<input type="text" :value="value"> -->
<button @click="$emit('demoEvent','我把v-model改喽')">{{demoProp}}</button>
<button @click="$emit('update:name1','我把name1改喽')">{{name1}}</button>
<button @click="$emit('update:name2','我把name2改喽')">{{name2}}</button>
</div>
</template>
<script>
export default {
name: 'ChildC',
// props:['value'],// 基础用法
model: {
prop:'demoProp',
event:'demoEvent'
},
props: ['demoProp','name1','name2']
}
</script>
<style>
</style>
孙组件
<template>
<div>
我是孙组件
<button @click="getParent($parent)">获取父组件</button>
<p>{{b}}</p>
{{age}}
<button @click="sendToy">给父组件传递数据</button>
</div>
</template>
<script>
export default {
props: ['b'],
methods: {
getParent(parent) {
console.log(parent)
},
sendToy() {
this.$emit("change", '我是孙组件的洋娃娃')
},
},
inject: ['age']
}
</script>
main.js
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
}
}).$mount('#app')
三、插槽
1、默认插槽
2、具名插槽
3、作用域插槽
父组件
<child-d>
<div>我是默认插槽</div>
<template v-slot:content>
<div>
我是插槽content内容
</div>
</template>
<template #footer>
<div>
我是插槽footer的内容
</div>
</template>
<template #user="slotData">
我是作用域插槽提供的内容{{slotData}}
</template>
</child-d>
子组件childD
<template>
<div>
我是子组件专门演示插槽
<p>
<slot name="content"></slot>
<slot></slot>
<slot name="footer"></slot>
<slot :user="user" name="user"></slot>
</p>
</div>
</template>
data() {
return {
user: {
name: '张三'
}
}
}
四、事件,计算属性和监听器
计算属性如果有依赖其他数据比如A,数据A变了,计算属性会getter会自动执行。计算属性定义的变量,可以在模版中直接使用。
watch里可以进行异步操作,计算属性不可以。
wach和计算属性,都是对变量、
除此之外的情况,可以用方法。
<template>
{{num}}@@@{{bigNum}}
<button @click="changeNum">改变bigNum</button>
</template>
data() {
return {
num:10
}
},
methods: {
changeNum() {
this.bigNum = 2000
}
},
computed:{
// 函数简写getter
// bigNum(){
// return num*10
// },
bigNum: {
get() {
return this.num*10
},
set(value) {
this.num = value/10
}
}
},
watch:{
// 函数简单写法,没有深度监视
// bigNum(newValue,oldValue) {
// console.log(newValue,oldValue)
// },
// 对象写法,
bigNum:{
deep:true,// 深度监视,
handler:function (newValue, oldValue) {
setTimeout(()=>{
console.log(newValue,oldValue)
},2000)
},
immediate:true //watch开始立即执行handler
}
}