文章目录
1、vue生命周期
<template>
<view>
<button @click="click">提交</button>
<view>
{{text}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
text: 'hello'
}
},
methods: {
click(){
this.text = '你好'
}
},
beforeCreate() {
console.log(this.text)
},
created() {
console.log(this.text)
},
beforeMount() {
console.log(1)
},
mounted() {
console.log(2)
},
beforeUpdate() {
console.log("beforeupdate 如果页面没有重新渲染，则不会执行")
},
updated() {
console.log("updated")
}
}
</script>
<style>
</style>
运行程序，可以看到程序依次执行了beforeCreate() 、created()、beforeMount() 、mounted()
由于页面没有重新渲染，所以没有执行beforeUpdate，当我们点击了 button 更新了页面，然后执行了beforeUpdate 和 updated
2、计算属性、方法、监听
计算属性
<template>
<view>
{{fullText}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
test : '测试'
}
},
methods: {
click(){
this.firstText = '你好'
}
},
computed: {
fullText() {
console.log('计算属性')
return this.firstText + " " + this.lastText
}
}
}
</script>
<style>
</style>
只有计算属性相关的值发生变化时，computed 才会执行，如果点击按钮改变的是 test
click(){
this.test = '你好'
}
computed 就不会执行
方法
接下来把字符串的拼接改成 fullText() 方法：
<template>
<view>
{{fullText()}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
test : '测试',
}
},
methods: {
click(){
this.test = '你好'
},
fullText() {
console.log('方法')
return this.firstText + " " + this.lastText
}
},
}
</script>
<style>
</style>
展示 hello world 的是 fullText() 方法将 firstText 和 lastText 拼接的，然后点击 button 按钮改变的虽然不是 firstText 或 lastText ，但是 fullText() 还是执行了
所以如果能实现同样的功能，应该优先使用计算属性，它只有在改变 firstText 或 lastText 才执行。而 fullText() 方法只要页面重新渲染了，都会执行
watch监听
<template>
<view>
{{fullText}}
<button @click="click">提交</button>
{{test}}
</view>
</template>
<script>
export default {
data() {
return {
firstText: 'hello',
lastText: 'world',
fullText: 'hello world',
test: '测试'
}
},
methods: {
click() {
this.aa = '你好'
},
},
watch: {
firstText() {
console.log('监听')
this.fullText = this.firstText + " " + this.lastText
},
lastText() {
console.log('监听')
this.fullText = this.firstText + " " + this.lastText
}
}
}
</script>
<style>
</style>
监听了 firstText 和 lastText，只有当 firstText 或 lastText 改变时，监听才执行，如果我们点击 button 改变的是 test 的值，监听不会执行
所以总结下来，实现这个功能 方法 是最不可取的
3、父子组件传值
父组件向子组件传值
在 components 文件夹下新建一个 child.vue 组件，首先需要在 index.vue 中引用，然后使用，在 child 中传入一个 myText 参数，值就是 text
<template>
<view>
<child :myText="text"></child>
</view>
</template>
<script>
import child from '../../components/child.vue'
export default {
components: {
child
},
data() {
return {
text: '我是父组件'
}
},
methods: {
},
}
</script>
<style>
</style>
child.vue
在子组件中，用 props 接收参数 myText，然后展示在页面即可
<template>
<view>
{{myText}}
</view>
</template>
<script>
export default {
props:['myText'],
data() {
return {
};
}
}
</script>
<style>
</style>
运行程序：
子组件向父组件传值
child.vue中，我们在 button 中绑定一个 click 事件，点击执行 click 方法，用 $emit 方法，传入一个参数 myChange，值是 title
<template>
<view>
<button type=primary @click="click">传值</button>
</view>
</template>
<script>
export default {
data() {
return {
title: '我是子组件'
};
},
methods: {
click() {
this.$emit('myChange', this.title)
}
}
}
</script>
<style>
</style>
index.vue 父组件中，child 组件绑定 上个页面的 myChange 方法，执行本页面的 change 方法，可以接收上个页面的参数
<template>
<view>
<child @myChange="change"></child>
{{title}}
</view>
</template>
<script>
import child from '../../components/child.vue'
export default {
components: {
child
},
data() {
return {
title: ''
}
},
methods: {
change(res) {
this.title = res
}
},
}
</script>
<style>
</style>
运行结果：
4、组件参数校验
上边的父组件向子组件传值后，在子组件页面可以进行校验，修改 child.vue
props:{
myText:Number
},
虽然能正常显示，但是控制台有警告，我们还可以这样写：
props:{
myText:[String,Number]
},
或者
myText:{
type:Number,
default:3
}