이 기사에서 제공하는 내용은 Vue의 가치 전송 방법이 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법(3가지 유형)에 대한 소개에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 상위 구성 요소는 하위 구성 요소에 값을 전달합니다.
1. props를 사용하여 데이터 채널을 설정합니다
// 这是父组件 <div id="app"> // 这是子组件 <child message="hello" ></child> </div>
2. 하위 컴포넌트의 props를 통해 전달되는 데이터
Vue,component('child',{ props:['message'] })
2. 하위 컴포넌트는 상위 컴포넌트에 값을 전달합니다
1. 하위 구성 요소 맞춤 이벤트
Vue.component('child',{ methods:{ handleClick(){ // 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数 this.$emit('parentClick',123) } }, template:` <div> <h1>这是子组件</h1> <button @click="handleClick" > 发送给父组件 </button> </div> ` })
2. 상위 구성 요소의 하위 태그는 맞춤 이벤트를 수신하고 전달된 값을 가져옵니다
Vue.component('parent', { data() { return { msg: '我是子组件' } }, methods: { receiveMsg(value) { console.log(value) this.msg = value } }, template:' <div> <h1>这是子组件</h1> <p>接收子组件传过来的值{{msg}}</p> <child @parentClick='receiveMsg'></child> </div> ' })
3. 부모-자식 구성 요소가 아닌 구성 요소는 값을 전달합니다.
때로는 두 구성 요소도 전달해야 합니다. 값(부모-자식 관계))을 전달하고 값을 가져오려면 공개 vue가 필요합니다.
1. 빈 vue를 만듭니다
// 创建一个空的公共的vue对象 var bus = new Vue();
2. 구성 요소 1에서 $emit을 정의하여 데이터를 보냅니다.
3. 전달된 데이터를 받으려면 구성요소 2 $on에서 사용하세요bus.$emit('test','数据')물론, 값을 전송하고 얻기 위해 로컬 스토리지를 사용할 수도 있습니다.
bus.$on('test', function(num) { this.msg= num; //事件的解绑问题 bus.$off("test") })관련 권장 사항:
vue는 어떻게 현재 클릭된 요소를 가져오고 값을 전달합니까?
위 내용은 Vue에서 값을 전달하는 방법은 무엇입니까? Vue에서 일반적으로 사용되는 값 전달 방법 소개(3가지 유형)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!