武进网站建设基本流程,用ps怎么做网站首页,央企 网站建设 公司,一家专门做特产的网站1.父向子进行传值
在父组件中#xff0c;使用子组件的标签#xff0c;并通过属性将数据传递给子组件。
在子组件中#xff0c;定义props选项来接收父组件传递的数据。
父组件的数据会通过props选项传递给子组件#xff0c;子组件可以直接使用这些数据。
父组件#xf…
1.父向子进行传值
在父组件中使用子组件的标签并通过属性将数据传递给子组件。
在子组件中定义props选项来接收父组件传递的数据。
父组件的数据会通过props选项传递给子组件子组件可以直接使用这些数据。
父组件
templatedivchild-component :messageparentMessage //div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {data() {return {parentMessage: Hello from parent component,};},components: {ChildComponent,},
};
/script 子组件:
templatedivp{{ message }}/p/div
/templatescript
export default {props: {message: {type: String,required: true,},},
};
/script
在上面的例子中父组件通过属性:message将数据parentMessage传递给了子组件。子组件通过props选项定义了一个名为message的属性接收父组件传递过来的数据并在模板中进行展示。
2.子向父传值
在子组件中通过$emit方法触发一个自定义事件并传递要传递给父组件的数据。
在父组件中通过v-on指令监听子组件触发的事件并在触发时执行相应的方法获取传递的数据。
子组件:
templatedivbutton clicksendMessageSend Message/button/div
/templatescript
export default {methods: {sendMessage() {this.$emit(message-sent, Hello from child component);},},
};
/script
父组件
templatedivchild-component message-senthandleMessage /p{{ receivedMessage }}/p/div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {data() {return {receivedMessage: ,};},components: {ChildComponent,},methods: {handleMessage(message) {this.receivedMessage message;},},
};
/script
