山东兴润建设有限公司网站,直播软件排行榜2020,山东郓城网站建设,怎么查看网页的源代码向子组件传递数据通过Props
1.创建子组件
详细步骤#xff1a; 1.在components创建子组件 2.等父组件接受到参数后通过Props来接受父组件传递过来的数据
templatediv idapph2title:{{ title }}/h2ptips:{{ tips }} 1.在components创建子组件 2.等父组件接受到参数后通过Props来接受父组件传递过来的数据
templatediv idapph2title:{{ title }}/h2ptips:{{ tips }}/p/div
/template
script
export default{data(){return{}},props:[title,tips]
}
/script2.创建父组件
详细步骤 1.导入子组件页面路径 2.在components注册组件 3.创建子组件标签 4.在子组件标签接受子组件传递过来的数据
templatediv idappmy-component /!-- HelloWorld / --hello-world /my-son title标题 :tipstips//div
/templatescript
import HelloWorld from ./components/HelloWorld.vue;
import MySon from ./components/MySon.vue
export default{name:App,components:{HelloWorld,MySon},data(){return{tips:一个友好的提示语}}
}
/scriptstyle/style 效果图
父传子优化代码
如果传入的prop很多可以使用传入整体props对象
案例 父组件输入的内容在子组件展示
子组件 子组件有哪些操作 1.创建一个新的页面 2.用props来接受父页面传递的参messageFormParent 3.使用{{}} 来展示内容
templatediv idapph3this is parent component/h3input typetext p收到父组件的消息 {{ messageFormParent }}/p/div
/template
script
export default{data(){return{}},props:[messageFormParent],
}
/script父组件 1.导入子组件页面 2.注册子页面 3.创建子组件标签 4.在子组件标签中 通过v-bind绑定数据通过messageFormParent传递出去 5.组件中双向数据绑定 这个是父组件input输入框,子组件也跟着展示父组件通过v-model来绑定
templatediv idapph3this is parent component/h3input typetext v-modelmessagep收到子组件的消息/pmy-son :messageFormParentmessage //div
/templatescript
import MySon from ./components/MySon.vue
export default{name:App,components:{MySon},data(){return{message:}}}
/scriptstyle/style
案例 子组件输入的内容在父组件展示 两种写法
第一种写法 通过v-bind绑定事件和v-on监听事件
操作步骤 1.子组件input输入框通过v-model双向数据绑定再通过按键事件来监听输入的内容 2.父组件在子组件标签里通过v-bind绑定事件和v-on监听事件 3.在子组件内通过按键监听事件用$emit来接收父组件传递过来的事件和要给父组件传递过去的参数 4.父组件通过监听事件展示子组件传递过来的数据展示 子组件
templatediv idapph3子组件页面/h3!-- 子组件通过v-model双向数据绑定把消息传递给父组件 --!-- 通过keyup事件来监听这个输入的内容 --input typetext v-modelmessage keyupsendp收到父组件的消息 {{ messageFormParent }}/p/div
/template
script
export default{data(){return{message:,}},props:[messageFormParent],methods:{// 通过$emit向父组件传递消息send(){// reveiveOn:父组件传递过来的事件 message要传递的参数this.$emit(reveive,this.message)}}
}
/script父组件
templatediv idapph3父组件页面/h3input typetext v-modelmessagep接收到子组件的消息:{{ messageChild }}/pmy-son :messageFormParentmessage v-on:reveive reveive//div
/templatescript
import MySon from ./components/MySon.vue
export default{name:App,components:{MySon},data(){return{message:,messageChild:,}},methods:{// 接受一个自定义事件来接收函数reveive(data){// 接受子组件传递过来的参数this.messageChild data}}}
/scriptstyle/style
也可以通过v-model 双向数据绑定绑定
子组件
templatediv idapph3子组件页面/h3!-- 子组件通过v-model双向数据绑定把消息传递给父组件 --!-- 通过keyup事件来监听这个输入的内容 --input typetext v-modelmessage keyupsend!-- p收到父组件的消息 {{ messageFormParent }}/p --p收到父组件的消息 {{ value }}/p/div
/template
script
export default{data(){return{message:,}},// props:[messageFormParent],props:[value],methods:{// 通过$emit向父组件传递消息send(){// reveiveOn:父组件传递过来的事件 message要传递的参数this.$emit(input,this.message)}}
}
/script父组件
templatediv idapph3父组件页面/h3input typetext v-modelmessagep接收到子组件的消息:{{ messageChild }}/p!-- my-son :messageFormParentmessage v-on:reveive reveive/ --my-son v-modelmessageChild//div
/templatescript
import MySon from ./components/MySon.vue
export default{name:App,components:{MySon},data(){return{message:,messageChild:,}},methods:{// 接受一个自定义事件来接收函数reveive(data){// 接受子组件传递过来的参数this.messageChild data}}}
/scriptstyle/style
