Vue09 五一前 组件通信

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量789 收藏 9
点赞数 22
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51148337/article/details/138507179
版权

store组合式写法

count.ts组合式写法

import { reactive } from 'vue'
export const useLoveTalkStore = defineStore('talk', () => {

    const talkList = reactive(
        JSON.parse(localStorage.getItem('talkList') as string) || []
    )

    //getATalk函数相当于action
    async function getATalk() {
        //发请求，下面这行写法是：连续解构+重命名
        let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        // //把请求回来的字符，包装成一个对象
        let obj = { id: nanoid(), title } //简单写成title:content 上面let可以result改成 {data:{content}}；还可以进一步 title  {data:{content:title}}
        // //放到数组中
        talkList.unshift(obj)
    }
    //必须有return，不然无效
    return { talkList, getATalk }
})

选项式写法

import { defineStore } from 'pinia'
import axios from 'axios'
import { nanoid } from 'nanoid'

export const useLoveTalkStore = defineStore('talk', {
    actions: {
        async getATalk() {
            //发请求，下面这行写法是：连续解构+重命名
            let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            // //把请求回来的字符，包装成一个对象
            let obj = { id: nanoid(), title } //简单写成title:content 上面let可以result改成 {data:{content}}；还可以进一步 title  {data:{content:title}}
            // //放到数组中
            this.talkList.unshift(obj)
        }
    },
    //state真正存储数据的地方
    state() {
        return {
            talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
            // talkList: [
            //     { id: 'ftrfasdf01', title: '今天天气好' },
            //     { id: 'ftrfasdf02', title: '今天天气好2' },
            //     { id: 'ftrfasdf03', title: '今天天气好3' }
            // ]
        }
    }
})

组件通信_方式1_props

  • 父传子：属性值是非函数
<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>汽车：{{ car }}</h4>
		<!-- 传递，子需要接收 -->
		<Child :car="car" :sendToy="getToy"/>
  </div>
</template>

子组件需要接收

<script setup lang="ts" name="Child">
	import {ref} from 'vue'
	// 数据
	let toy = ref('奥特曼')
	// 声明接收props
	defineProps(['car','sendToy'])
</script>
  • 子传父：属性值是函数
<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>汽车：{{ car }}</h4>
		<!-- v-show、v-if条件渲染 不传递参数就不显示 -->
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<Child :car="car" :sendToy="getToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import {ref} from 'vue'
	// 数据
	let car = ref('奔驰')
	let toy = ref('')
	// 方法
	function getToy(value:string){
		toy.value = value
	}
</script>

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>父给的车：{{ car }}</h4>
		<button @click="sendToy(toy)">把玩具给父亲</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import {ref} from 'vue'
	// 数据
	let toy = ref('奥特曼')
	// 声明接收props
	defineProps(['car','sendToy'])
</script>

组件通信_方式2__自定义事件

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>{{ str }}</h4>
		<button @click="test">点我</button>
		<!-- 给子组件Child绑定事件 -->
		<Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
    import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	let str = ref('你好')

	function test() {
		str.value = '哈哈'
	}
</script>

可以简化写法

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>{{ str }}</h4>
		<button @click="str = '哈哈'">点我</button>
		<!-- 给子组件Child绑定事件 -->
		<Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
    import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	let str = ref('你好')
</script>

$seven 特殊占位符 这是一个事件对象

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>{{ str }}</h4>
		<button @click="str = $event">点我</button>
		<!-- 给子组件Child绑定事件 -->
		<Child/>
  </div>
</template>

子传父

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>

​ <Child @send-toy=“saveToy”/>

给组件绑定send-toy事件，只要这个事件被触发，saveToy就会被调用

如何触发事件

需要在子组件里面声明，用一个宏函数，defineEmits

还需要加上emit。这个可以放在任何想要触发的地方

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<button @click="emit('send-toy',toy)">测试</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	// 声明事件
	const emit =  defineEmits(['send-toy'])
    
	// onMounted(() => {
	// setTimeout(() => {
	// 	emit('send-toy')
	// }, 3000);
	// })
</script>

案例

父组件

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
    import Child from './Child.vue'
	import { ref } from "vue";
	// 数据
	let toy = ref('')

	// 用于保存传递过来的玩具
	function saveToy(value:string){
		console.log('saveToy',value)
		toy.value = value
	}
</script>

子组件

<template>
  <div class="child">
    <h3>子组件</h3>
		<h4>玩具：{{ toy }}</h4>
		<button @click="emit('send-toy',toy)">测试</button>
  </div>
</template>

<script setup lang="ts" name="Child">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	// 声明事件
	const emit = defineEmits(['send-toy'])
</script>

组件通信_方式3__mitt

pubsub

$bus

mitt

接收数据：提前绑定好事件（提前订阅事件）

提供数据：在合适的时候触发事件（发布消息）

案例

哥哥传递玩具给弟弟

<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>玩具：{{ toy }}</h4>
		<button @click="emitter.emit('send-toy',toy)">玩具给弟弟</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
	import {ref} from 'vue'
	import emitter from '@/utils/emitter';

	// 数据
	let toy = ref('奥特曼')
</script>

<template>
  <div class="child2">
    <h3>子组件2</h3>
		<h4>电脑：{{ computer }}</h4>
		<h4>哥哥给的玩具：{{ toy }}</h4>
  </div>
</template>

<script setup lang="ts" name="Child2">
	import {ref,onUnmounted} from 'vue'
	import emitter from '@/utils/emitter';
	// 数据
	let computer = ref('联想')
	let toy = ref('')

	// 给emitter绑定send-toy事件
	emitter.on('send-toy',(value:any)=>{
		toy.value = value
	})
	// 在组件卸载时解绑send-toy事件;对内存友好
	 onUnmounted(()=>{
	 	emitter.off('send-toy')
	})
</script>

组件通信_方式4__v-model

双向绑定

v-model用在html标签上

<template>
  <div class="father">
    <h3>父组件</h3>

    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- :value数据来到页面，@input页面来到数据 -->
    <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">

  </div>
</template>

v-model用在组件标签上

father.Vue

<template>
  <div class="father">
    <h3>父组件</h3>
      
    <!-- v-model用在组件标签上 -->
    <AtguiguInput v-model="username"/>
    <!-- <AtguiguInput 
      :modelValue="username" 
      @update:modelValue="username = $event"
    /> -->

  </div>
</template>

<script setup lang="ts" name="Father">
	import { ref } from "vue";
  import AtguiguInput from './AtguiguInput.vue'
  // 数据
  let username = ref('zhansgan')
</script>

<template>
  <input 
    type="text" 
    :value="modelValue"
    @input="emit('update:modelValue',(<HTMLInputElement>$event.target).value)"
  >
</template>

<script setup lang="ts" name="AtguiguInput">
  defineProps(['modelValue'])
  const emit = defineEmits(['update:modelValue')
</script>

$event到底是什么，什么时候可以用.target

对于原生事件，$event就是事件对象——能.target

对于自定义事件，$event就是触发事件时，所传递的数据——不能.target

组件通信_v-model的细节

update:modelValue名称太长 可以更改名字

如果value可以更换，可以再组件标签上多次使用v-model

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4> 

    <!-- 修改modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import { ref } from "vue";
  import AtguiguInput from './AtguiguInput.vue'
  // 数据
  let username = ref('zhansgan')
  let password = ref('123456')
</script>

组件

<template>
  <input 
    type="text" 
    :value="ming"
    @input="emit('update:ming',(<HTMLInputElement>$event.target).value)"
  >
  <br>
  <input 
    type="text" 
    :value="mima"
    @input="emit('update:mima',(<HTMLInputElement>$event.target).value)"
  >
</template>

<script setup lang="ts" name="AtguiguInput">
  defineProps(['ming','mima'])
  const emit = defineEmits(['update:ming','update:mima'])
</script>

组件通信_方式5__$attrs

概念：$attrs用于实现当前组件的父组件，向当前组件的子组件的通信（祖—孙）

祖-孙

father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>a：{{a}}</h4>
		<h4>b：{{b}}</h4>
		<h4>c：{{c}}</h4>
		<h4>d：{{d}}</h4>
		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{x:100,y:200}" />
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import {ref} from 'vue'

	let a = ref(1)
	let b = ref(2)
	let c = ref(3)
	let d = ref(4)
    
</script>

child.vue 把祖所有值都传递给孙

<template>
	<div class="child">
		<h3>子组件</h3>
		<!-- <h4>a:{{ a }}</h4>
		<h4>其他:{{ $attrs }}</h4> -->
		<GrandChild v-bind="$attrs"/>
	</div>
</template>

<script setup lang="ts" name="Child">
	import GrandChild from './GrandChild.vue'
	// defineProps(['a'])
</script>

grandchild.vue

<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<h4>x：{{ x }}</h4>
		<h4>y：{{ y }}</h4>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','b','c','d','x','y'])
</script>

孙-组

father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4>a：{{a}}</h4>
		<Child :a="a" :updateA="updateA"/>
  </div>
</template>

<script setup lang="ts" name="Father">
	import Child from './Child.vue'
	import {ref} from 'vue'

	let a = ref(1)

	function updateA(value:number){
		a.value += value
	}
</script>

grandchild.vue

<template>
	<div class="grand-child">
		<h3>孙组件</h3>
		<h4>a：{{ a }}</h4>
		<button @click="updateA(6)">点我将爷爷那的a更新</button>
	</div>
</template>

<script setup lang="ts" name="GrandChild">
	defineProps(['a','updateA'])
</script>

组件通信_方式6__ r e f s 与 refs与 refs与parent

father.vue

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产：{{ house }}</h4>
		<button @click="changeToy">修改Child1的玩具</button>
		<button @click="changeComputer">修改Child2的电脑</button>
		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
		<Child1 ref="c1"/>
		<Child2 ref="c2"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref,reactive } from "vue";
	let c1 = ref()
	let c2 = ref()

	// 数据
	let house = ref(4)
	// 方法
	function changeToy(){
		c1.value.toy = '小猪佩奇'
	}
	function changeComputer(){
		c2.value.computer = '华为'
	}
	function getAllChild(refs:{[key:string]:any}){
		console.log(refs)
		for (let key in refs){
			refs[key].book += 3
		}
	}
	// 向外部提供数据
	defineExpose({house})
</script>

child1.vue

<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>书籍：{{ book }} 本</h4>
		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	let book = ref(3)

	// 方法
	function minusHouse(parent:any){
		parent.house -= 1
	}

	// 把数据交给外部
	defineExpose({toy,book})

</script>

child2.vue

<template>
  <div class="child2">
    <h3>子组件2</h3>
		<h4>电脑：{{ computer }}</h4>
		<h4>书籍：{{ book }} 本</h4>
  </div>
</template>

<script setup lang="ts" name="Child2">
		import { ref } from "vue";
		// 数据
		let computer = ref('联想')
		let book = ref(6)
		// 把数据交给外部
		defineExpose({computer,book})
</script>

$refs 父传子

父得到子数据

<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>房产：{{ house }}</h4>
		<button @click="changeToy">修改Child1的玩具</button>
		<button @click="getAllChild($refs)">让所有孩子的书变多</button>
		<Child1 ref="c1"/>
	</div>
</template>

<script setup lang="ts" name="Father">
	import Child1 from './Child1.vue'
	import Child2 from './Child2.vue'
	import { ref,reactive } from "vue";
	let c1 = ref()

	// 数据
	let house = ref(4)
	// 方法
	function changeToy(){
		c1.value.toy = '小猪佩奇'
	}
	function getAllChild(refs:{[key:string]:any}){
		for (let key in refs){
			refs[key].book += 3
		}
	}
</script>

子必须把数据传递出去

<script setup lang="ts" name="Child1">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	let book = ref(3)

	// 把数据交给外部
	defineExpose({toy,book})

</script>

$parent 子传父

<template>
  <div class="child1">
    <h3>子组件1</h3>
		<h4>玩具：{{ toy }}</h4>
		<h4>书籍：{{ book }} 本</h4>
		<button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
	import { ref } from "vue";
	// 数据
	let toy = ref('奥特曼')
	let book = ref(3)

	// 方法
	function minusHouse(parent:any){
		parent.house -= 1
	}

</script>
说明属性
$refs值为对象，包含所有被ref属性标识的DOM元素或组件实例
$parent值为对象，当前组件的父组件实例对象

一个注意点

<script setup lang="ts" name="Father">
// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
	let obj = reactive({
		a:1,
		b:2,
		c:ref(3)
	})
	let x = ref(4)

	console.log(obj.a)
	console.log(obj.b)
	console.log(obj.c) //自动拆包解包
	console.log(x) //这不是4
</script>

组件通信_方式7__provide_inject

如何不打扰儿子，直接传递给孙 区别attrs

father.vue

<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>银子：{{ money }}万元</h4>
    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
    <Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Child from './Child.vue'
  import {ref,reactive,provide} from 'vue'

  let money = ref(100)
  let car = reactive({
    brand:'奔驰',
    price:100
  })
  function updateMoney(value:number){
    money.value -= value
  }

  // 向后代提供数据 不能是money.value 否则传递的就是个数字 无法改变
  provide('moneyContext',{money,updateMoney})
  provide('car',car)

</script>

GrandChild.vue

<template>
  <div class="grand-child">
    <h3>我是孙组件</h3>
    <h4>银子：{{ money }}</h4>
    <h4>车子：一辆{{car.brand}}车，价值{{car.price}}万元</h4>
    <button @click="updateMoney(6)">花爷爷的钱</button>
  </div>
</template>

<script setup lang="ts" name="GrandChild">
  import { inject } from "vue";

  let {money,updateMoney} = inject('moneyContext',{money:0,updateMoney:(param:number)=>{}})
  let car = inject('car',{brand:'未知',price:0})
</script>
有点小懒懒
关注
  • 22
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js 父子组件通信的十种方式
01-19
面试官：Vue 中父子组件通信有哪些方式？ 自己先想一分钟。 无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在...
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
vue3+ts组件通信
xiaochen_____的博客
03-26 2018
使用适当的命名规范：确保事件名称清晰明了，并且不会与现有的DOM事件名称冲突。避免命名冲突：如果应用中有多个事件，确保它们的命名不会产生冲突。组件解耦：自定义事件适用于解耦组件，不要过度使用，过度使用它们可能导致代码难以理解和维护。修饰符操作.once 修饰符：可以使用 .once修饰符，确保事件只被触发一次。.stop 修饰符：阻止事件继续传播到父元素。.prevent 修饰符：调用事件时调用 event.preventDefault()，防止默认行为。.capture 修饰符。
vue中8种组件通信方式
weixin_53954018的博客
07-22 994
上面两种方式用于父子组件之间的通信， 而使用props进行父子组件通信更加普遍;二者皆不能用于非父子组件之间的通信。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上父子组件通信:props;ref;
Vue3 组件之间的通信
muzidigbig的博客
03-22 1542
props父传子 emits子传父 mitt任意组件互传 provide inject跨组件传值 插槽传结构 v-model
Vue3爷孙组件通信
qq_45020145的博客
03-10 792
使用provide 与 inject实现跨层级组件(祖孙)间通信。
Vue3.js组件通信，兄弟组件，父子、祖孙组件
study_way的博客
01-01 1744
在 Vue.js 3 中，组件通信主要包括父子组件通信、兄弟组件通信以及祖孙组件通信。
Vue3组件之间的通信
洛*璃的博客
07-10 926
在中，组件通信是构建应用程序时必须处理的核心问题之一。有效的组件通信可以帮助我们组织和管理应用程序的状态和行为，使得代码更加清晰和可维护。在本文中，博主将详细介绍中常用的几种组件通信方式及其使用方法。
vue3组件之间的通信方式
H_ZMY的博客
08-08 1632
vue3组件之间的通信方式
vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)
热门推荐
u014678583的博客
04-04 1万+
方案父传子子传父propsemitsv-modelemitsrefemitsprovideinjectEventBusemit / on(可用于兄弟、爷孙、全局)emit / on(可用于兄弟、爷孙、全局)Vuex作用于全局作用于全局pinia作用于全局作用于全局1、父传子主要用到props属性传递，父组件通过自定义属性给子组件传值，子组件用props接收子组件 TitleMore.vue// 子组件
Vue3组件间的通信方式
m0_64642443的博客
07-18 6429
目录 1.props父向子组件通信2.自定义事件 子向父组件通信3.全局事件总线4.v-model组件通信（父子组件数据同步）绑定单个数据同步 绑定多个数据同步 5.useAttrs组件通信 6.ref与$parentref获取子组件实例对象 $parent获取父组件实例对象 7.provide-inject 可以实现隔辈传输8.Pinia选择式API：组合式API：父组件：props用于父组件向子组件传递数据，子组件用defineProps接收父组件传递来的参数在父组件中我们可以在使用子组件时，对其传递p
vue中的组件通信
TeFuir__Lv的博客
12-08 1248
vue中的组件通信
Vue 之孙组件向爷组件通信的实现
10-17
以上代码示例展示了Vue中孙组件向爷组件通信的一个简单实现。在实际项目中，可能需要处理更复杂的情况，比如多个子组件向爷组件通信、事件包含多层嵌套等。此时，可以考虑使用Vuex进行状态管理，或根据具体情况选择...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
10-15
Vue.js的官方文档并没有提供直接的爷孙组件通信方法，因为组件关系过深可能会使程序的结构变得复杂，维护困难。但我们可以将爷孙组件关系拆分成两个父子组件关系来间接通信。我们可以将爷爷和父亲视为一个父子组件，...
Vue2.0学习之详解Vue 组件及父子组件通信
08-28
总结起来，Vue2.0的组件系统和父子组件通信机制为开发者提供了强大的工具，使他们能够构建复杂的、可维护的应用。通过组件化，我们可以把一个大项目分解成许多小而明确的部分，每个部分都有自己的职责，从而降低了...
Vue前端路由详解——以Ruoyi框架为案例学习
警警的博客
09-03 1071
Ruoyi框架前端路由通过Vue Router实现，支持静态路由和动态路由的配置，通过路由守卫实现权限控制等需求，采用路由懒加载提高应用性能，并通过路由元信息存储自定义信息。这些特性共同构成了Ruoyi框架前端路由的完整体系，为开发者提供了灵活、强大的路由管理能力。
el-table el-table-column表头嵌套循环数据
林中明月间丶
09-04 499
【代码】el-table el-table-column表头嵌套循环数据。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 510
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 537
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
Vue.js组件通信详解与实战
组件的创建通常通过`Vue.extend()`方法实现，这会创建一个新的Vue组件构造器。例如： ```javascript var MyComponent = Vue.extend({ // 选项，如数据、方法、模板等 }); ``` 注册组件有两种方式：全局注册和局部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值