父子组件传值
父传子
//子组件
<template>
<div>
<h1>我是儿子组件</h1>
<p>父组件传递的值:{{ message }}</p>
</div>
</template>
<script>
export default{
props:["message"], //接受父组件传递信息
data(){
return{
}
} ,
methods:{}
}
</script>
子组件接受父组件的数据,一定要通过 props 的方式来声明需要接受的数据
主要原因有两个:
- 提高组件的复用性。子组件可能会被复用在多个父组件中,通过 props 声明需要的数据,可以让子组件根据不同的外部数据源动态配置。
- 遵循单向数据流。Vue 中推荐从父组件传递数据给子组件,而不是子组件直接修改父组件的状态。这可以让应用的数据流更加明确易懂。
//父组件
<template>
<div>
<h1>我是父组件</h1>
<son :message="message1"> </son>
</div>
</template>
<script>
import Son from "../components/Son.vue"
export default {
data() {
return {
message1:'hello cow',
}
},
components:{
Son,
},
methods:{}
}
</script>
父组件绑定的名称(等号左边)要和子组件定义的名称一样,右边可以取任意值
父组件引用子组件三部曲:
1、写自定义子组件名,好显示子组件
2、import引入子组件
3、components里面声明子组件
子传父
//子组件
<template>
<div>
<h1>我是儿子组件</h1>
<button @click="toFather">子传父</button>
</div>
</template>
<script>
export default{
data(){
return{
toBa:'我是儿子的压岁钱'
}
} ,
methods:{
toFather(){
this.$emit("toFather",this.toBa)
},
}
}
</script>
通过点击事件按钮实现子传父
子传父用 this.$emit 方法,将子组件值通过toFather方法传递到父组件
//父组件
<template>
<div>
<h1>我是父组件</h1>
<son @toFather="getSon"> </son>
<div>子组件传递的值:{{ fromSonValue }}</div>
</div>
</template>
<script>
import Son from "../components/Son.vue"
export default {
data() {
return {
fromSonValue:'',
}
},
components:{
Son,
},
methods:{
getSon(msg){
this.fromSonValue=msg
}
}
}
</script>
父组件这边@接受时(等号左边)方法名必须和子组件一致,右边可以任意取
methods里面的方法要带参数,此参数就是子组件的值
computed计算属性
<template>
<div id="app">
<div>
姓:<el-input v-model.trim="firstName"></el-input>+
名:<el-input v-model.trim="lastName"></el-input>=
{{ sum }}
</div>
<el-button @click="changeName">改名卡</el-button>
</div>
</template>
<script>
export default {
data() {
return {
firstName:'',
lastName:'',
};
},
computed: {
//完整写法
sum:{
get(){
return this.firstName+this.lastName
},
set方法本质是在调用changeName
set(value){
this.firstName=value.slice(0,1) //获取字符串的首字符
this.lastName=value.slice(1) //获取除了首字符以外的其余所有字符
}
}
},
methods:{
changeName(){
this.sum='吕小布' //通过this.sum就可以调用计算属性
}
}
};
</script>
如何向数组对象的一个对象中插入值
//对象字面量是以 { } 定义的,里面的每个键值对以 key: value 的形式写
toAdd() {
this.tableData.push({
course: this.input_course,
grade: this.input_grade
})
}
watch监视器
富文本编辑器vueEditor
小程序端接收显示内容如下:
<view class="content">
<rich-text></rich-text>
</view>
一般会遇到图片显示不全的情况,解决如下:
<view class="content">
<rich-text :nodes="newsDetail.content.replace(/\<img/gi, '<img style=\'max-width:
100%;height:auto;display:block;margin-bottom:10px\'')"></rich-text>
</view>
具体代码解析:
-
newsDetail.content 是原始的富文本字符串内容
-
replace方法用于替换内容
第一个参数是正则表达式:
/\<img/gi
-
\<img
- 匹配以字符<img
开头的字符串,如<img src="...">
-
/
- 正则表达式的开始和结束标志 - g 表示全局匹配
- i 表示不区分大小写
-
-
rich-text组件将替换后的内容渲染成富文本
当遇到某一样式设置在小程序端不生效时,直接通过类名(同一样式类名一样)在style中编辑样式,最好添加!important
,为了提高优先级,防止被其他样式定义覆盖。