vue 구성 요소에 값을 전달하는 방법은 무엇입니까?

컴포넌트 값 전송 방법: 1. 라우팅을 통해 값을 전송합니다. 2. 상위 컴포넌트의 하위 컴포넌트 라벨을 상위 컴포넌트의 데이터에 바인딩하여 하위 컴포넌트의 props가 상위 컴포넌트가 전달한 값을 받습니다. , 하위 구성 요소의 props는 상위 구성 요소에서 전달한 값을 받습니다. 3. 하위 구성 요소가 상위 구성 요소에 값을 전달할 때 "this.$emit"를 사용하여 getData 이벤트를 전달합니다. ​​부모가 아닌 구성 요소 사이에서 하나는 "this.on" 이벤트를 바인딩하고 다른 하나는 "this.$ Emit" 이벤트를 트리거하거나 로컬 저장소에 공용 데이터를 추가하는 작업은 두 페이지에서 얻을 수 있습니다

vue 구성 요소가 값을 전달하는 방법:

1. 경로 매개 변수 전달

단계:

① 경로 정의 시 매개 변수 props: true를 추가합니다. 매개 변수 자리 표시자: name 『Usage: to ="'path/'＋value"'

② 점프하는 페이지에 추가 상위 매개변수 props:['name']

③ 이름은 "사용법: 직접 this. name in js; html"의 직접 보간 {{ 이름}}

2. 상위 구성 요소에서 하위 구성 요소 값 전송

상위 구성 요소는 하위 구성 요소 태그를 상위 구성 요소의 데이터에 바인딩하고 하위 구성 요소의 props를 바인딩하여 값을 하위 구성 요소로 전송합니다. 상위 구성 요소에서 전달한 값을 받습니다

단계:

① 상위 구성 요소에서 전송할 데이터를 설정합니다. "data(){ parentid: value}"

② 사용자 정의 속성을 참조된 하위 구성 요소에 바인딩합니다. 상위 구성 요소에 데이터를 사용자 정의 속성 " mybtn>』

③ 하위 구성 요소에 매개변수 props:['childid']를 추가한 다음

코드:

<div id="app"><br/>    <mybtn :childid=&#39;parentid&#39; title="我是标题"></mybtn><br/></div><br/><script><br/>    new Vue({<br/>        el:"app",<br/>        data:{<br/>            parentid:"88888"<br/>        },<br/>        components:{<br/>            "mybtn" : {<br/>                props: [&#39;childid&#39;,&#39;title&#39;],<br/>                template: &#39;<button>我是{{childid}}号按钮{{title}}</button>&#39;<br/>            }<br/>        }<br/>    })<br/></script><br/>

결과 표시:

3. Sub 구성 요소가 상위 구성 요소에 값을 전달하는 방법

은 this.e m i t를 사용하여 getData 이벤트를 탐색하는 것입니다. setData에서 this.emit을 사용하여 getData 이벤트를 순회하고 마지막으로 this.msg를 반환합니다.

단계:

①상위 구성 요소에는 매개 변수가 필요하므로 상위 구성 요소의 레이블에 사용자 정의 이벤트를 정의하고 이벤트 내부에서 매개 변수를 가져옵니다. "@myEvent=" 콜백"은 콜백 함수의 매개변수를 받습니다."

② 하위 구성요소에서 사용자 정의 이벤트를 트리거하고 매개변수를 전달합니다. 『this.$emit('상위 구성요소의 사용자 정의 이벤트', 매개변수)』

코드:

<template><br/>  <div><br/>      <mybtn :  style="max-width:90%" @changeColorEvent="getColor" :parentid="childid" title="我是标题"></mybtn><br/>  </div><br/> <br/></template><br/><script><br/> <br/>  export default {<br/>    name : &#39;test&#39;,<br/>    data () {<br/>      return {<br/>        childid:"666",<br/>        acolor:&#39;blue&#39;,<br/>        bcolor:&#39;red&#39;<br/>      }<br/>    },<br/>    methods:{<br/>      getColor(colors){<br/>        //父组件就可以拿到子组件传过来的colors<br/>        console.log(colors)<br/>        this.acolor = "white";<br/>        this.bcolor = colors;<br/>      },<br/>      //接收多个参数<br/>      /*getColor(colors1,colors2){<br/>        console.log(colors1,colors2)<br/>        this.acolor = colors2;<br/>        this.bcolor = colors1;<br/>      }*/<br/>    },<br/>    components: {<br/>      &#39;mybtn&#39; : {<br/>        props : [&#39;parentid&#39;,&#39;title&#39;],<br/>        template : `<br/>          <div class="box"><br/>            <p>我最初是一张白纸</p><br/>            <button @click="changeColor">我是{{parentid}}号按钮{{title}}</button><br/>          </div><br/>        `,<br/>        methods: {<br/>          changeColor(){<br/>          //这个方法是触发父组件中的事件，第一个参数是触发的事件名称。第二个参数及以后是向changeColorEvent传的参数<br/>           this.$emit(&#39;changeColorEvent&#39;,"orange")<br/>           //发送多个参数可以直接跟在后面<br/>           //this.$emit(&#39;changeColorEvent&#39;,"orange","white")<br/>          }<br/>        }<br/>      }<br/>    }<br/>  }<br/></script><br/><style scoped><br/> <br/></style><br/>

4. 상위 구성요소가 아닌 구성요소 간 값 전송

단계:

(1) 방법 1.

① 공개 커뮤니케이션 컴포넌트(Vue)를 생성하고, 값을 전달해야 하는 컴포넌트에 커뮤니케이션 컴포넌트를 도입합니다.

② 이벤트 this.on('eventname', this.id)을 하나로 바인딩합니다.

③ In another 구성 요소에서 이벤트가 트리거됩니다. this.$emit('eventname',( options)=>{})

(2) 방법 2,

공개 데이터를 로컬 저장소에 추가합니다. 두 페이지

위 내용은 vue 구성 요소에 값을 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!