本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下
<强>一、组件间通信(父组件,,,,在,子组件)
步骤:
①父组件在调用子组件传值
& lt;子组件myValue=" https://www.yisu.com/zixun/123 "比;& lt;/child-component>
之前
②在子组件中获取父组件传来的值
Vue.component(子组件,{
道具:“括号”,
模板:“
}）
之前
代码1:
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>父传子& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/js/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; p>{{味精}}& lt;/p>
& lt; parent-component> & lt;/parent-component>
& lt;/div>
& lt; script>//在vue中一切都是组件//父传子
Vue.component(“父组件”,{
数据:函数(){
返回{
礼物:“传家宝”
}
},
模板:
& lt; div>
& lt; h2>这是父组件& lt;/h2>
& lt; hr>
& lt;子组件v-bind: myValue=" https://www.yisu.com/zixun/gift "祝辞& lt;/child-component>
& lt;/div>
”
}）
Vue.component(“子组件”,{
道具:“括号”,
模板:
& lt; div>
& lt; h2>这是子组件& lt;/h2>
& lt; p>{{“父传递的值:”+ myValue}} & lt;/p>
& lt;/div>
”
}）
新Vue ({
埃尔:“#容器”,
数据:{
味精:“你好VueJs”
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
括号是属性名,必须都一样……拿数据中的用v-bind:或者:
道具是产权属性,是个数组
代码2:
& lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>父子之间通信练习& lt;/title>
& lt;脚本src=" https://www.yisu.com/zixun/js/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; p>{{味精}}& lt;/p>
& lt; my-login> & lt;/my-login>
& lt;/div>
& lt; script>/*
登录窗口
创建4个组件,分别是标上我的输入按钮我的登录(复合组件)
*/Vue.component(“标的”,{
道具:“myLabel”,
模板:
& lt; div>
& lt; label> {{myLabel}} & lt;/label>
& lt;/div>
”
}）
Vue.component(“输入”,{
模板:
& lt; div>
& lt;输入类型=拔谋尽?比;
& lt;/div>
”
}）
Vue.component(“按钮”,{
道具:“色”,
模板:
& lt; div>
& lt; button> {{myButton}} & lt;/button>
& lt;/div>
”
}）//复合组件
Vue.component(“我的登录”,{
数据:函数(){
返回{
uname:“用户名”,
upwd:“密码”,
登录:“登录”,
注册:“注册”
}
},
模板:
& lt; div>
& lt;厂牌v-bind: myLabel=" uname”祝辞& lt;/my-label>
& lt; my-input> & lt;/my-input>
& lt;厂牌v-bind: myLabel=" upwd "祝辞& lt;/my-label>
& lt; my-input> & lt;/my-input>
& lt;我的按钮v-bind:色="登录"祝辞& lt;/my-button>
& lt;我的按钮v-bind:色="注册"祝辞& lt;/my-button>
& lt;/div>
”
}）
新Vue ({
埃尔:“#容器”,
数据:{
味精:“你好VueJs”
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
代码3:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt;脚本src=" https://www.yisu.com/zixun/js/vue.js "祝辞& lt;/script>
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; div id=叭萜鳌北?
& lt; my-login> & lt;/my-login>
& lt;/div>
& lt; script>
Vue.component(“标的”,{
道具:[' labelName '),
模板:“& lt; label> {{labelName}} & lt;/label>”
}）
Vue.component(“输入”,{
道具:“技巧”,
模板:“& lt;输入类型=拔谋尽?占位符="技巧"/祝辞;”
}）
Vue.component(“按钮”,{
道具:[' btnName '),
模板:“& lt; button> {{btnName}} & lt;/button>”
}）
Vue.component(我的登录,{
模板:
& lt; form>
& lt;厂牌labelName="用户名“祝辞& lt;/my-label>
& lt;我的输入提示=扒胧淙胗没白４? lt;/my-input>
& lt; br/比;
& lt;厂牌labelName="密码”祝辞& lt;/my-label>
& lt;我的输入提示=扒胧淙朊苈搿弊４? lt;/my-input>
& lt; br/比;
& lt;我的按钮btnName="登录”祝辞& lt;/my-button>
& lt;我的按钮btnName="注册”祝辞& lt;/my-button>
& lt;/form>
”
}）
新Vue ({
埃尔:“#容器”,
数据:{
味精:“你好Vue”
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
