道具在vue组件中各种角色总结
在Vue中组件是实现模块化开发的主要内容,而组件的通信更是Vue数据驱动的灵魂,现就四种主要情况总结如下:
<强>使用道具传递数据——组件内部
//html
& lt; div id=癮pp1”比;
& lt; i>注意命名规定:仅在html内使用my-message
& lt;孩子我的信息="组件内部数据传递”祝辞& lt;/child>
& lt;/div>//js
& lt; script>
Vue.component(‘孩子’,{
道具:[' myMessage '),
模板:“& lt; mark> {{myMessage}} & lt;马克/祝辞;”
}）;
新Vue ({
埃尔:“# app1”
}）
& lt;/script>
<强>动态道具通信——组件与根节点(父子之间)
& lt; div id=癮pp2”比;
& lt;输入v模型=皃arentMsg”比;
& lt; br>
& lt;孩子:parent-msg=" parentMsg "祝辞& lt;/child>
& lt;/div>
& lt; script>
Vue.component(‘孩子’,{
道具:[' parentMsg '),
模板:“& lt; mark> {{parentMsg}} & lt;马克/祝辞;”
}）;
新Vue ({
埃尔:“# app2 ',
数据:{
parentMsg:“味精父!”
}
}）
& lt;/script>
之前
<强>对比分析:
例子1:
& lt; comp some-prop=?”祝辞& lt;/comp>//组件内部数据传递,对应字面量语法:传递了一个字符串" 1 "
例子2:
& lt; comp v-bind: some-prop=" 1 "祝辞& lt;/comp>//组件与根节点数据传递,对应动态语法:传递实际的数字:js表达式
单向数据流动特点:父组件属性变化时将传导给子组件,反之不可
<强>两种改变道具情况
注意在JavaScript中对象和数组是引用类型,指向同一个内存空间,如果道具是一个对象或数组,在子组件内部改变它会影响父组件的状态。
//定义一个局部数据属性,并将支柱的初始值作为局部数据的初始值
道具:[' initialCounter '),
数据:函数(){
返回{计数器:这。initialCounter}
}//定义一个局部计算属性,此属性从道具的值计算得出
道具:“大小”,
计算:{
normalizedSize:函数(){
返回this.size.trim () .toLowerCase ()
}
}
之前
<强>子组件索引
尽管有道具和事件,但是有时仍然需要在JavaScript中直接访问子组件。为此可以使用裁判为子组件指定一个索引ID
& lt; div id=案浮北?
& lt; !——vm。美元。参考文献p将DOM节点——比;
& lt; b ref=p祝辞hello
& lt; !——vm。美元。参考文献孩子将是comp实例——比;
& lt;用户配置文件)='我在3 ' ref=案乓弊４? lt;/user-profile>
& lt;/div>
& lt; script>
var userPf=Vue.component(“用户配置文件”,{
模板:“& lt; div>你好refs<美元/div>”
}）;
var父=new Vue ({el:“#父”});//访问子组件
var=孩子家长。refs.profile美元;
console.log(孩子[0]);
console.log(父母。refs.p美元);
& lt;/script>
之前
参美元只在组件渲染完成后才填充,并且它是非响应式的。它仅仅作为一个直接访问子组件的应急方案,应当避免在模版或计算属性中使用参美元。
<强>数据反传- - -自定义事件
自定义事件的根基在于每个vue实例都实现了事件接口(事件接口)
Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是在和排放不美元是addEventListener和dispatchEvent的别名。
,父组件可以在使用子组件的地方直接用v来监听子组件触发的事件
<李>监听:美元(eventName)
<李>触发:$排放(eventName)
& lt; div id=癮pp3”比;
& lt; p>看父母的数据:& lt; mark> {{t}} & lt;/mark>,孩子的数据:& lt; mark> {{childWords}} & lt;/mark> & lt;/p>
& lt;孩子v:添加=" pChange "祝辞& lt;/child>
& lt;孩子v:添加=" pChange "祝辞& lt;/child>
& lt;孩子v: click.native=氨镜亍弊４? lt;/child>
& lt;/div>
& lt; script>
Vue.component(‘孩子’,{
模板:“& lt;按钮@click=疤砑印痹趝{c}} & lt;/button>”,
数据:函数(){
返回{
c: 0,
味精:\ '我来自孩子年代数据
}
}，
方法:{
添加:函数(){
这一点。c +=1;
美元。排放(‘添加’,this.msg);
}
}，
}）;
新Vue ({
艾尔:# app3,
数据:{
t: 0,
childWords:“
}，
方法:{
pChange:函数(味精){
这一点。t +=1;
this.childWords=味精;
}，
本地:函数(){
alert('我是一个土生土长的事件,它来自根元素!”);
}
}
}）
& lt;/script>
