牛牛的前端笔记

父子组件传值

父传子

//子组件
<template>
    <div>
        <h1>我是儿子组件</h1>
        <p>父组件传递的值：{{ message }}</p>
    </div>

</template>
<script>
export default{
    props:["message"], //接受父组件传递信息
    data(){
        return{
       
        }
    } ,
    methods:{} 
}
</script>

子组件接受父组件的数据,一定要通过 props 的方式来声明需要接受的数据

主要原因有两个:

1. 提高组件的复用性。子组件可能会被复用在多个父组件中,通过 props 声明需要的数据,可以让子组件根据不同的外部数据源动态配置。
2. 遵循单向数据流。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>

具体代码解析:

1. newsDetail.content 是原始的富文本字符串内容

2. replace方法用于替换内容

   第一个参数是正则表达式:/\<img/gi

   • \<img - 匹配以字符<img开头的字符串,如<img src="...">

   • / - 正则表达式的开始和结束标志

   • g 表示全局匹配
   • i 表示不区分大小写

3. rich-text组件将替换后的内容渲染成富文本

当遇到某一样式设置在小程序端不生效时，直接通过类名（同一样式类名一样）在style中编辑样式，最好添加!important,为了提高优先级,防止被其他样式定义覆盖。