美食 健康 常识 生活 日常 合同 家居 养生 国学 心理学 中医 植物 营销 动物 汽车 管理 旅游 投资 人工智能 数字化 消费 元宇宙 金融 饮食 史学 经济
  • 会员

  • 组件间怎么通信?盘点Vue组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API 组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。其中将要实现的通信方式如下表所示。

    方式Vue2Vue3
    父传子propsprops
    子传父$emitemits
    父传子$attrsattrs
    子传父$listeners无(合并到 attrs方式)
    父传子provideprovide
    子传父injectinject
    子组件访问父组件$parent
    父组件访问子组件$children
    父组件访问子组件$refexpose&ref
    兄弟传值EventBusmitt

    props

    props是组件通信中最常用的通信方式之一。父组件通过v-bind传入,子组件通过props接收,下面是它的三种实现方式。

    • 选项式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child :msg="parentMsg" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    export default {
    
      components:{
    
        Child
    
      },
    
      data() {
    
        return {
    
          parentMsg: '父组件信息'
    
        }
    
      }
    
    }
    
    </script>
    
     
    
     
    
    //子组件
    
     
    
    <template>
    
      <div>
    
        {{msg}}
    
      </div>
    
    </template>
    
    <script>
    
    export default {
    
      props:['msg']
    
    }
    
    </script>
    • 组合式Api
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child :msg="parentMsg" />
    
      </div>
    
    </template>
    
    <script>
    
    import { ref,defineComponent } from 'vue'
    
    import Child from './Child.vue'
    
    export default defineComponent({
    
      components:{
    
        Child
    
      },
    
      setup() {
    
        const parentMsg = ref('父组件信息')
    
        return {
    
          parentMsg
    
        };
    
      },
    
    });
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            {{ parentMsg }}
    
        </div>
    
    </template>
    
    <script>
    
    import { defineComponent,toRef } from "vue";
    
    export default defineComponent({
    
        props: ["msg"],// 如果这行不写,下面就接收不到
    
        setup(props) {
    
            console.log(props.msg) //父组件信息
    
            let parentMsg = toRef(props, 'msg')
    
            return {
    
                parentMsg
    
            };
    
        },
    
    });
    
    </script>
    • setup语法糖
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child :msg="parentMsg" />
    
      </div>
    
    </template>
    
    <script setup>
    
    import { ref } from 'vue'
    
    import Child from './Child.vue'
    
    const parentMsg = ref('父组件信息')
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            {{ parentMsg }}
    
        </div>
    
    </template>
    
    <script setup>
    
    import { toRef, defineProps } from "vue";
    
    const props = defineProps(["msg"]);
    
    console.log(props.msg) //父组件信息
    
    let parentMsg = toRef(props, 'msg')
    
    </script>

    注意

    props中数据流是单项的,即子组件不可改变父组件传来的值

    在组合式API中,如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

    emit

    子组件可以通过emit发布一个事件并传递一些参数,父组件通过v-on进行这个事件的监听。

    • 选项式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child @sendMsg="getFromChild" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    export default {
    
      components:{
    
        Child
    
      },
    
      methods: {
    
        getFromChild(val) {
    
          console.log(val) //我是子组件数据
    
        }
    
      }
    
    }
    
    </script>
    
     
    
    // 子组件
    
     
    
    <template>
    
      <div>
    
        <button @click="sendFun">send</button>
    
      </div>
    
    </template>
    
    <script>
    
    export default {
    
      methods:{
    
        sendFun(){
    
          this.$emit('sendMsg','我是子组件数据')
    
        }
    
      }
    
    }
    
    </script>
    • 组合式Api
    /父组件
    
     
    
    <template>
    
      <div>
    
        <Child @sendMsg="getFromChild" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    import { defineComponent } from "vue";
    
    export default defineComponent({
    
      components: {
    
        Child
    
      },
    
      setup() {
    
        const getFromChild = (val) => {
    
          console.log(val) //我是子组件数据
    
        }
    
        return {
    
          getFromChild
    
        };
    
      },
    
    });
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            <button @click="sendFun">send</button>
    
        </div>
    
    </template>
    
     
    
    <script>
    
    import { defineComponent } from "vue";
    
    export default defineComponent({
    
        emits: ['sendMsg'],
    
        setup(props, ctx) {
    
            const sendFun = () => {
    
                ctx.emit('sendMsg', '我是子组件数据')
    
            }
    
            return {
    
                sendFun
    
            };
    
        },
    
    });
    
    </script>
    • setup语法糖
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child @sendMsg="getFromChild" />
    
      </div>
    
    </template>
    
    <script setup>
    
    import Child from './Child'
    
    const getFromChild = (val) => {
    
          console.log(val) //我是子组件数据
    
        }
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            <button @click="sendFun">send</button>
    
        </div>
    
    </template>
    
    <script setup>
    
    import { defineEmits } from "vue";
    
    const emits = defineEmits(['sendMsg'])
    
    const sendFun = () => {
    
        emits('sendMsg', '我是子组件数据')
    
    }
    
    </script>

    attrs和listeners

    子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

    子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器,在Vue3中已经不再使用;但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

    • 选项式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    export default {
    
      components:{
    
        Child
    
      },
    
      data(){
    
        return {
    
          msg1:'子组件msg1',
    
          msg2:'子组件msg2'
    
        }
    
      },
    
      methods: {
    
        parentFun(val) {
    
          console.log(`父组件方法被调用,获得子组件传值:${val}`)
    
        }
    
      }
    
    }
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
      <div>
    
        <button @click="getParentFun">调用父组件方法</button>
    
      </div>
    
    </template>
    
    <script>
    
    export default {
    
      methods:{
    
        getParentFun(){
    
          this.$listeners.parentFun('我是子组件数据')
    
        }
    
      },
    
      created(){
    
        //获取父组件中所有绑定属性
    
        console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    
        //获取父组件中所有绑定方法    
    
        console.log(this.$listeners) //{parentFun:f}
    
      }
    
    }
    
    </script>
    • 组合式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    import { defineComponent,ref } from "vue";
    
    export default defineComponent({
    
      components: {
    
        Child
    
      },
    
      setup() {
    
        const msg1 = ref('子组件msg1')
    
        const msg2 = ref('子组件msg2')
    
        const parentFun = (val) => {
    
          console.log(`父组件方法被调用,获得子组件传值:${val}`)
    
        }
    
        return {
    
          parentFun,
    
          msg1,
    
          msg2
    
        };
    
      },
    
    });
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            <button @click="getParentFun">调用父组件方法</button>
    
        </div>
    
    </template>
    
    <script>
    
    import { defineComponent } from "vue";
    
    export default defineComponent({
    
        emits: ['sendMsg'],
    
        setup(props, ctx) {
    
            //获取父组件方法和事件
    
            console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
    
            const getParentFun = () => {
    
                //调用父组件方法
    
                ctx.attrs.onParentFun('我是子组件数据')
    
            }
    
            return {
    
                getParentFun
    
            };
    
        },
    
    });
    
    </script>
    • setup语法糖
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
    
      </div>
    
    </template>
    
    <script setup>
    
    import Child from './Child'
    
    import { ref } from "vue";
    
    const msg1 = ref('子组件msg1')
    
    const msg2 = ref('子组件msg2')
    
    const parentFun = (val) => {
    
      console.log(`父组件方法被调用,获得子组件传值:${val}`)
    
    }
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            <button @click="getParentFun">调用父组件方法</button>
    
        </div>
    
    </template>
    
    <script setup>
    
    import { useAttrs } from "vue";
    
     
    
    const attrs = useAttrs()
    
    //获取父组件方法和事件
    
    console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
    
    const getParentFun = () => {
    
        //调用父组件方法
    
        attrs.onParentFun('我是子组件数据')
    
    }
    
    </script>

    注意

    Vue3中使用attrs调用父组件方法时,方法前需要加上on;如parentFun->onParentFun

    provide/inject

    provide:是一个对象,或者是一个返回对象的函数。里面包含要给子孙后代属性

    inject:一个字符串数组,或者是一个对象。获取父组件或更高层次的组件provide的值,既在任何后代组件都可以通过inject获得。

    • 选项式API
    //父组件
    
    <script>
    
    import Child from './Child'
    
    export default {
    
      components: {
    
        Child
    
      },
    
      data() {
    
        return {
    
          msg1: '子组件msg1',
    
          msg2: '子组件msg2'
    
        }
    
      },
    
      provide() {
    
        return {
    
          msg1: this.msg1,
    
          msg2: this.msg2
    
        }
    
      }
    
    }
    
    </script>
    
     
    
    //子组件
    
     
    
    <script>
    
    export default {
    
      inject:['msg1','msg2'],
    
      created(){
    
        //获取高层级提供的属性
    
        console.log(this.msg1) //子组件msg1
    
        console.log(this.msg2) //子组件msg2
    
      }
    
    }
    
    </script>
    • 组合式API
    //父组件
    
     
    
    <script>
    
    import Child from './Child'
    
    import { ref, defineComponent,provide } from "vue";
    
    export default defineComponent({
    
      components:{
    
        Child
    
      },
    
      setup() {
    
        const msg1 = ref('子组件msg1')
    
        const msg2 = ref('子组件msg2')
    
        provide("msg1", msg1)
    
        provide("msg2", msg2)
    
        return {
    
           
    
        }
    
      },
    
    });
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
            <button @click="getParentFun">调用父组件方法</button>
    
        </div>
    
    </template>
    
    <script>
    
    import { inject, defineComponent } from "vue";
    
    export default defineComponent({
    
        setup() {
    
            console.log(inject('msg1').value) //子组件msg1
    
            console.log(inject('msg2').value) //子组件msg2
    
        },
    
    });
    
    </script>
    • setup语法糖
    //父组件
    
    <script setup>
    
    import Child from './Child'
    
    import { ref,provide } from "vue";
    
    const msg1 = ref('子组件msg1')
    
    const msg2 = ref('子组件msg2')
    
    provide("msg1",msg1)
    
    provide("msg2",msg2)
    
    </script>
    
     
    
    //子组件
    
     
    
    <script setup>
    
    import { inject } from "vue";
    
    console.log(inject('msg1').value) //子组件msg1
    
    console.log(inject('msg2').value) //子组件msg2
    
    </script>

    说明

    provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。

    parent/children

    $parent: 子组件获取父组件Vue实例,可以获取父组件的属性方法等

    $children: 父组件获取子组件Vue实例,是一个数组,是直接儿子的集合,但并不保证子组件的顺序。

    • Vue2
    import Child from './Child'
    
    export default {
    
      components: {
    
        Child
    
      },
    
      created(){
    
        console.log(this.$children) //[Child实例]
    
        console.log(this.$parent)//父组件实例
    
      }
    
    }

    注意父组件获取到的$children并不是响应式的

    expose&ref

    $refs可以直接获取元素属性,同时也可以直接获取子组件实例。

    • 选项式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child ref="child" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    export default {
    
      components: {
    
        Child
    
      },
    
      mounted(){
    
        //获取子组件属性
    
        console.log(this.$refs.child.msg) //子组件元素
    
     
    
        //调用子组件方法
    
        this.$refs.child.childFun('父组件信息')
    
      }
    
    }
    
    </script>
    
     
    
    //子组件 
    
     
    
    <template>
    
      <div>
    
        <div></div>
    
      </div>
    
    </template>
    
    <script>
    
    export default {
    
      data(){
    
        return {
    
          msg:'子组件元素'
    
        }
    
      },
    
      methods:{
    
        childFun(val){
    
          console.log(`子组件方法被调用,值${val}`)
    
        }
    
      }
    
    }
    
    </script>
    • 组合式API
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child ref="child" />
    
      </div>
    
    </template>
    
    <script>
    
    import Child from './Child'
    
    import { ref, defineComponent, onMounted } from "vue";
    
    export default defineComponent({
    
      components: {
    
        Child
    
      },
    
     
    
      setup() {
    
        const child = ref() //注意命名需要和template中ref对应
    
        onMounted(() => {
    
          //获取子组件属性
    
          console.log(child.value.msg) //子组件元素
    
     
    
          //调用子组件方法
    
          child.value.childFun('父组件信息')
    
        })
    
        return {
    
          child //必须return出去 否则获取不到实例
    
        }
    
      },
    
    });
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
        </div>
    
    </template>
    
    <script>
    
    import { defineComponent, ref } from "vue";
    
    export default defineComponent({
    
        setup() {
    
            const msg = ref('子组件元素')
    
            const childFun = (val) => {
    
                console.log(`子组件方法被调用,值${val}`)
    
            }
    
            return {
    
                msg,
    
                childFun
    
            }
    
        },
    
    });
    
    </script>
    • setup语法糖
    //父组件
    
     
    
    <template>
    
      <div>
    
        <Child ref="child" />
    
      </div>
    
    </template>
    
    <script setup>
    
    import Child from './Child'
    
    import { ref, onMounted } from "vue";
    
    const child = ref() //注意命名需要和template中ref对应
    
    onMounted(() => {
    
      //获取子组件属性
    
      console.log(child.value.msg) //子组件元素
    
     
    
      //调用子组件方法
    
      child.value.childFun('父组件信息')
    
    })
    
    </script>
    
     
    
    //子组件
    
     
    
    <template>
    
        <div>
    
        </div>
    
    </template>
    
    <script setup>
    
    import { ref,defineExpose } from "vue";
    
    const msg = ref('子组件元素')
    
    const childFun = (val) => {
    
        console.log(`子组件方法被调用,值${val}`)
    
    }
    
    //必须暴露出去父组件才会获取到
    
    defineExpose({
    
        childFun,
    
        msg
    
    })
    
    </script>

    注意

    通过ref获取子组件实例必须在页面挂载完成后才能获取。

    在使用setup语法糖时候,子组件必须元素或方法暴露出去父组件才能获取到

    EventBus/mitt

    兄弟组件通信可以通过一个事件中心EventBus实现,既新建一个Vue实例来进行事件的监听,触发和销毁。

    在Vue3中没有了EventBus兄弟组件通信,但是现在有了一个替代的方案mitt.js,原理还是 EventBus。

    • 选项式API
    //组件1
    
    <template>
    
      <div>
    
        <button @click="sendMsg">传值</button>
    
      </div>
    
    </template>
    
    <script>
    
    import Bus from './bus.js'
    
    export default {
    
      data(){
    
        return {
    
          msg:'子组件元素'
    
        }
    
      },
    
      methods:{
    
        sendMsg(){
    
          Bus.$emit('sendMsg','兄弟的值')
    
        }
    
      }
    
    }
    
    </script>
    
     
    
    //组件2
    
     
    
    <template>
    
      <div>
    
        组件2
    
      </div>
    
    </template>
    
    <script>
    
    import Bus from './bus.js'
    
    export default {
    
      created(){
    
       Bus.$on('sendMsg',(val)=>{
    
        console.log(val);//兄弟的值
    
       })
    
      }
    
    }
    
    </script>
    
     
    
    //bus.js
    
     
    
    import Vue from "vue"
    
    export default new Vue()
    • 组合式API

    首先安装mitt

    npm i mitt -S

    然后像Vue2中bus.js一样新建mitt.js文件。

    mitt.js

    import mitt from 'mitt'
    
    const Mitt = mitt()
    
    export default Mitt
    //组件1
    
    <template>
    
         <button @click="sendMsg">传值</button>
    
    </template>
    
    <script>
    
    import { defineComponent } from "vue";
    
    import Mitt from './mitt.js'
    
    export default defineComponent({
    
        setup() {
    
            const sendMsg = () => {
    
                Mitt.emit('sendMsg','兄弟的值')
    
            }
    
            return {
    
               sendMsg
    
            }
    
        },
    
    });
    
    </script>
    
     
    
    //组件2
    
    <template>
    
      <div>
    
        组件2
    
      </div>
    
    </template>
    
    <script>
    
    import { defineComponent, onUnmounted } from "vue";
    
    import Mitt from './mitt.js'
    
    export default defineComponent({
    
      setup() {
    
        const getMsg = (val) => {
    
          console.log(val);//兄弟的值
    
        }
    
        Mitt.on('sendMsg', getMsg)
    
        onUnmounted(() => {
    
          //组件销毁 移除监听
    
          Mitt.off('sendMsg', getMsg)
    
        })
    
     
    
      },
    
    });
    
    </script>
    • setup语法糖
    //组件1
    
     
    
    <template>
    
        <button @click="sendMsg">传值</button>
    
    </template>
    
    <script setup>
    
    import Mitt from './mitt.js'
    
    const sendMsg = () => {
    
        Mitt.emit('sendMsg', '兄弟的值')
    
    }
    
    </script>
    
     
    
    //组件2
    
     
    
    <template>
    
      <div>
    
        组件2
    
      </div>
    
    </template>
    
    <script setup>
    
    import { onUnmounted } from "vue";
    
    import Mitt from './mitt.js'
    
    const getMsg = (val) => {
    
      console.log(val);//兄弟的值
    
    }
    
    Mitt.on('sendMsg', getMsg)
    
    onUnmounted(() => {
    
      //组件销毁 移除监听
    
      Mitt.off('sendMsg', getMsg)
    
    })
    
    </script>

    写在最后

    其实组件还可以借助Vuex或者Pinia状态管理工具进行通信(但是组件之间的通信一般不建议这样做,因为这样就会出现组件不能复用的问题)。

    组件间怎么通信?盘点Vue组件通信方式
    微信扫码分享

    0

    0

    分享
  • 会员

  • 上一篇: html5中px和em的区别是什么

    下一篇: 社恐就是不爱与人交往?它其实是一种病!

    还没有评论,赶紧来抢沙发吧!

    如何缓解选择困难症?

    人生在世,难免面临做出选择的时候,而在选择的过程中,有那么一些人犹豫不决,不知如何下手。其实,选择困难症很大程度是你不知 …

    暖心暖胃牛肉面的做法 暖暖的味道牛肉面

    1、材料:牛肉、牛骨头。 2、辅料:香葱、辣椒油、白萝卜。 3、调味:葱段、姜片、八角、大料、香叶、草果、小茴香、花椒、 …

    黑鱼的营养价值和功效

    黑鱼经常被人们用作食疗的材料,可以加快术后伤口修复、催乳等等,效果很明显。 黑鱼的营养价值 1、黑鱼肉中含蛋白质、脂肪、 …

    二伏吃什么(二伏吃什么菜好)

    转眼间,又到了中伏节气,中国人有自己的节气饮食文化,那么,中伏吃什么?中伏吃什么传统食物呢?下面一起来看看吧! 北京中伏 …

    小食品进货渠道

    小食品进货渠道一般为以下三种:食品批发市场,货物比较全,可以实实在在的看到商品,有些店家还能试吃。食品厂商或代理,可以拿 …

    乒乓球常识知识大全

    中国的乒乓球文化 乒乓球作为一种体育运动,一种事业,一种文化,在人民群众生活的方方面面产生了巨大影响,也为民众提供了各种 …

    猪肉锅盔的做法 猪肉锅盔的做法和配方法

    1、食材:面粉适量、食盐适量、酵母粉适量、花椒粉适量、色拉油适量、葱姜适量、肉馅适量、五香粉适量。 2、先把2克食盐和3 …

    二婚的夫妻,大都是抱着这个目的

    在人生的旅途中,婚姻是人生重要的一部分,而经历两次婚姻的人们也越来越多。 二婚的夫妻,大都是抱着重新寻找幸福与满足自己需 …

    冰焦糖玛奇朵如何做 焦糖玛奇朵的制作方法

    1、焦糖玛奇朵首先是在黑咖啡的基础上的,所以先做黑咖啡。 2、选择咖啡豆:好的咖啡豆颜色大小均匀一致表面有光泽,有香气无 …

    中国古代有哪些书法家

    中国古代有哪些书法家 我国古代著名书法家有王羲之、欧阳询、颜真卿、柳公权、苏轼、黄庭坚、米芾、蔡襄、赵孟、董其昌等,每一 …

    自制减肥茶都有什么材料

    一、人参玫瑰花茶人参2-3片,玫瑰花、大枣适量。人参能振奋精神,延缓衰老,安神,有减脂、减肥、美容的功效。 二、洛神荷叶 …

    防晒喷雾怎么卸干净(防晒喷雾要用洗面奶卸吗)

    喷了防晒喷雾怎么洗掉 要用卸妆油才能洗干净。使用方法如下: 1、按压四下取油,用量如果太多的话,反面容易因清洁不干净而堵 …

    葛根的食用方法(葛根的食用方法和用量)

    1、准备好米酒糊的所有材料,把桂圆干、枸杞、葡萄干放在碗里。把红枣切去核,切成小段备用。 2、葛根粉用清水化开调匀,备用 …

    生菜种植知识最新

    生菜是我们日常生活中经常吃的蔬菜,那么关于生菜的知识你知道多少呢?生菜(var. ramosa Hort.)叶用莴苣的俗 …

    做菜大全家常菜做法 辣椒做菜大全家常菜做法

    1、做法一 用料 五花肉200克、花椒少许、生抽1勺、老抽1勺、葱姜2片、料酒1勺、蚝油1勺、洋葱半个、蒜苗3根、豆瓣酱 …

    北极熊动物冷知识

    北极熊的拉丁文是“ursusmaritimus”。翻译过来的话,ursus意思是“熊”,而maritimus的意思是“海 …

    包饺子是什么节日的风俗

    包饺子是春节、除夕、冬至等节日的风俗。包饺子可以将福运、福气包住,所以在春节有包饺子的习俗。在除夕吃饺子有招财进宝的寓意 …

    2023兔年喜迎春节对联100副

    2023兔年喜迎春节对联 1. 上联:财源滚滚随春到;下联:喜气洋洋伴福来。横批:财源广进。 2. 上联:一年四季春常在 …

    白菜苔的花能不能吃 白菜苔的花能不能吃了

    白菜在春天抽出菜苔后,就会开出黄色的小花来,这种花气味清香,有很好的观赏价值,也有人会有疑问,白菜苔的花能不能吃呢? 白 …

    开海啦 开海啦什么意思

      挑海鲜、吃海鲜看这里,最肥最美味!   螃蟹   蟹肉肥美、营养丰富,大连人常吃的螃蟹一般都是飞蟹、花盖和赤甲红。这 …