vue基础教学（9）

最新推荐文章于 2024-11-11 06:30:00 发布

I`ivresse

最新推荐文章于 2024-11-11 06:30:00 发布

阅读量731

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Taojia9958/article/details/125209283

版权

这篇博客详细讲解了Vue.js中的组件通讯、ref的使用（包括基本使用和在组件上的应用）、is的两种用法，以及插槽的三大类型——默认插槽、具名插槽和作用域插槽，重点阐述了插槽在提升组件灵活性方面的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、组件通讯

<body>
		<div id="app">
			<!-- 父组件 -->
			<h2>子组件</h2>
			<cpn :number1="num1" :number2="num2" @num1change="num1Change" @num2change="num2Change"></cpn>
			<h2>父组件</h2>
			<h4>num1:{
  {num1}}</h4>
			<input type="text" v-model="num1" />
			<h4>num2:{
  {num2}}</h4>
			<input type="text" v-model="num2" />
		</div>

		<!--  子组件 -->
		<template id="cpn">
			<div>
				<h4>dnumber1:{
  {dnumber1}}</h4>
				<h4>number1:{
  {number1}}</h4>
				<input type="text" v-model="dnumber1" />
				<h4>dnumber2:{
  {dnumber2}}</h4>
				<h4>number2:{
  {number2}}</h4>
				<input type="text" v-model="dnumber2" />
			</div>
		</template>
		<script src="vue.js"></script>
		<script>
			const cpn = {
				template: '#cpn',
				data() {
					return {
						dnumber1: this.number1,
						dnumber2: this.number2
					}
				},
				props: {
					number1: {
						type: [Number, String]
					},
					number2: {
						type: [Number, String]
					}
				},
				watch: {
					number1(n) {
						this.dnumber1 = n * 100
					},
					number2(n) {
						this.dnumber2 = n * 100
					},
					dnumber1(n) {
						this.$emit('num1change', n / 100)
					},
					dnumber2(n) {
						this.$emit('num2change', n / 100)
					},
				}
			}
			const app = new Vue({
				el: "#app",
				data() {
					return {
						num1: 1,
						num2: 2
					}
				},
				components: {
					cpn
				},
				methods: {
					num1Change(val) {
						this.num1 = val
					},
					num2Change(val) {
						this.num2 = val
					},
				},
				computed: {

				}
			})

			//1.尽量不要直接使用props里面的值进行页面渲染
			//2.接收的数据类型

最低0.47元/天解锁文章