찾다
집웹 프론트엔드JS 튜토리얼Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법
Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법
php中世界最好的语言
php中世界最好的语言
May 28, 2018 pm 02:48 PM
구성 요소의사소통

이번에는 Vue에서 상위-하위 컴포넌트를 사용하여 todolist 컴포넌트와 통신하는 방법을 보여드리겠습니다. Vue에서 상위-하위 컴포넌트를 사용하여 todolist 컴포넌트와 통신할 때 주의사항은 무엇입니까? 사례를 살펴보겠습니다.

1. Todolist 기능 개발

<p>
  </p><p>
   <input>
   <button>提交</button>
  </p>
  
       
  • {{item}} 
    •   
   <script> new Vue({ el:"#root", data:{ inputValue:&#39;&#39;, list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=&#39;&#39;; } } }) </script>

2. Todolist 구성 요소 분할

구성 요소 정의

1 , 전역 구성 요소 재귀 구성 요소의 경우 , "이름" 옵션을 제공해야 합니다.

 <p>
  </p><p>
   <input>
   <button>提交</button>
  </p>
  
          
   <script> Vue.component(&#39;todo-item&#39;,{ template:&#39;<li>item&#39; }) ...<p style="text-align: left;"><strong>3. Componentspass value<p style="text-align: left;"><blockquote style="text-align: left;">상위 구성 요소는 값을 속성 형식으로 하위 구성 요소에 전달합니다. <p style="text-align: left;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document <script src="./vue.js"></script>  

  

          

  
          
   <script> //全局组件 // Vue.component(&#39;todo-item&#39;,{ // template:&#39;<li>item&#39; // }) var TodoItem={ template:&#39;<li>item&#39; } new Vue({ el:"#root", components:{ &#39;todo-item&#39;:TodoItem }, data:{ inputValue:&#39;&#39;, list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=&#39;&#39;; } } }) </script>

위 내용은 Vue에서 상위-하위 구성요소를 사용하여 todolist 구성요소와 통신하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
관련 기사
VUE3开发基础：使用extends继承组件VUE3开发基础：使用extends继承组件Jun 16, 2023 am 08:58 AM

Vue是目前最流行的前端框架之一，而VUE3则是Vue框架的最新版本，相较于VUE2，VUE3具备了更高的性能和更出色的开发体验，成为了众多开发者的首选。在VUE3中，使用extends继承组件是一个非常实用的开发方式，本文将为大家介绍如何使用extends继承组件。extends是什么？在Vue中，extends是一个非常实用的属性，它可以用于子组件继承父

聊聊Vue怎么通过JSX动态渲染组件聊聊Vue怎么通过JSX动态渲染组件Dec 05, 2022 pm 06:52 PM

Vue怎么通过JSX动态渲染组件？下面本篇文章给大家介绍一下Vue高效通过JSX动态渲染组件的方法，希望对大家有所帮助！

VSCode插件分享：一个实时预览Vue/React组件的插件VSCode插件分享：一个实时预览Vue/React组件的插件Mar 17, 2022 pm 08:07 PM

在VSCode中开发Vue/React组件时，怎么实时预览组件？本篇文章就给大家分享一个VSCode 中实时预览Vue/React组件的插件，希望对大家有所帮助！

如何使用 Vue 实现仿照片墙组件？如何使用 Vue 实现仿照片墙组件？Jun 25, 2023 am 08:19 AM

在现代Web开发中，组件化是一个极受欢迎的开发模式。而Vue.js则是一个非常适合组件化的前端框架。在这篇文章中，我们将介绍如何使用Vue.js创建一个仿照片墙组件。在开始之前，我们需要明确一些准备工作。首先，我们需要安装Vue.js。安装的方法非常简单，只需在终端中输入以下命令：npminstallvue安装完成后，我们可以创建一个名为

VUE3开发入门教程：使用组件实现分页VUE3开发入门教程：使用组件实现分页Jun 16, 2023 am 08:48 AM

VUE3开发入门教程：使用组件实现分页分页是一个常见的需求，因为在实际开发中，我们往往需要将大量的数据分成若干页以展示给用户。在VUE3开发中，可以通过使用组件实现分页功能，本文将介绍如何使用组件实现简单的分页功能。1.创建组件首先，我们需要创建一个分页组件，使用“vuecreate”命令创建VUE项目，并在src/components目录下创建Pagin

VUE3初学者入门：使用Vue.js组件组合实现可复用组合VUE3初学者入门：使用Vue.js组件组合实现可复用组合Jun 15, 2023 pm 08:53 PM

Vue.js是一款流行的前端JavaScript框架，它提供了一种简单易用的方式来构建动态网页应用程序。Vue.js的主要特点是其模块化的设计和可插拔的组件系统。这使得开发者可以轻松地创建可复用的组件，从而提高了应用程序的重用性和可维护性。在本文中，我们将重点介绍VUE3初学者如何使用Vue.js组件组合实现可复用组合。Vue.js组件是一个完整的封装元素，

Vue 中如何实现分页组件？Vue 中如何实现分页组件？Jun 25, 2023 am 08:23 AM

Vue是一款优秀的前端框架，在处理大量数据时，分页组件是必不可少的。分页组件可以使页面更加整洁，同时也可以提高用户体验。在Vue中，实现一个分页组件并不复杂，本文将介绍Vue如何实现分页组件。一、需求分析在实现分页组件前，我们需要对需求进行分析。一个基本的分页组件需要具有以下功能：展示当前页数、总页数以及每页展示条数点击分页按钮可以切换至不同页数展示当前页

常用 Vue UI 组件的使用技巧常用 Vue UI 组件的使用技巧Jun 25, 2023 am 08:31 AM

在现代Web开发中，UI组件是不可或缺的一部分。Vue.js框架中有许多优秀的UI组件库，如Element-UI、Vuetify、AntDesignVue等。这些组件库提供了许多易于使用的组件，可以帮助我们更加高效地创建Web应用程序。本文将介绍一些常用的VueUI组件，以及使用这些组件的技巧和实用技能。一、El-TableEl-Table是Eleme

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
1 몇 주 전ByDDD
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다
1 몇 주 전ByDDD
더보기

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7433
15
Cakephp 튜토리얼
1359
52
Steam의 계정 이름 형식은 무엇입니까?
76
11
Win11 활성화 키 영구
29
19
더보기