vue子组件使用父组件的值,vue调用父组件的方法
本文主要介绍Vue子组件和父组件，什么是父组件，什么是子组件。我们在面对这个问题的时候，经常会很困惑。我们会在下面的文章中详细介绍，有需要的朋友可以参考一下。
目录
一、父组件和子组件二。模板分离写作1。模板标签2。文/x-模板三。亲子组件通信-亲子传输1。第四类道具。父子组件通信-子组件传输到父组件1。vm。$emit( eventName，[…args]) V .父子组件通信-组合双向绑定案例1
一、父组件和子组件
我们往往分不清什么是父组件，什么是子组件。现在简单总结一下：我们把一段代码封装成一个组件，这个组件被引入到另一个组件中。封装组件的文件称为父组件，引入组件称为子组件。
具体代码如下：
div id=应用程序
组件2/组件2
/div
脚本
//全局注册
Vue.component(component1 ，{
模板：` 1
差异
h2你好/h2
/div
`
})
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
组件：{
//部分注册
组件2 :
模板：` 1
差异
组件1/组件1
h2world/h2
/div
`,
}
}
})
/脚本
1.全局注册组件component1
2.组件component2在本地注册，组件component1在组件2中被引用。
最后，我们使用html中的组件component-2，
模板代码就是：
差异
组件1/组件1
h2world/h2
/div
因为component1中也有一个模板，所以程序会自动解析它。最后，组件2的html代码是
差异
差异
h2你好/h2
/div
h2world/h2
/div
所以我们在浏览器上看到的效果应该是：
你好
世界
结果：
Component1是子组件，component2是父组件。
二、模板分离写法
当我们创建上面的组件时，我们都在组件中编写模板template。但是我们在编译器里写的时候，不仅没有代码提示，而且换行符也没有对齐，写起来很麻烦。所以下面是模板分离的写法。
1、template标签
我们提取最初在组件中编写的模板template，将其放入html中，使用template标记，并将id属性附加到它，如下所示：
模板id=component2
差异
组件1/组件1
h2world/h2
/div
/模板
然后，在组件中，将原模板标签的内容改为id，这样程序会自动找到对应的id模板：
组件：{
//部分注册
组件2 :
模板：` #component2 `，
}
}
推荐这种写法。
2、text/x-template
我们还有另外一种中文写法，和上面的差不多。我们使用上面的模板标签。这种写法只需要将模板中的内容放入脚本标签中，给出类型type=text/x-template，然后给出最后一个id属性。
如下：
脚本类型= text/x-template id= component 2
差异
组件1/组件1
h2world/h2
/div
/脚本
三、父子组件通信-父传子
当我们创建父组件和子组件时，如果子组件也想在父组件上获取相同的数据，一种方式是像后台发送接口一样获取数据，但这样会给服务器造成压力，于是我们有了第二种方式，通过props property获取父组件的数据。
div id=应用程序
test1 :cmovies=movies/test1
/div
模板id=test1
差异
保险商实验所
Li v-for= item in c movies { item } }/Li
/ul
/div
/模板
脚本
const app=new Vue({
埃尔： #app ，
数据：{
电影：[《海贼王》《海尔兄弟》《海王》]
},
组件：{
测试1 :
模板：`#test1 `，
道具：[cmovies]，
data(){
返回{}
},
}
}
})
/脚本
这里，我们将app实例定义为父组件和子组件test1。此时，如果子组件test1想要从父组件数据中获取数据并显示在页面上，则需要写入props属性。这里，变量cmovies是绑定的。最后，当我们在html中使用子组件test1时，如果我们想从父组件数据中导入数据，我们需要绑定属性。cmovies=movies ，cmovies是在props中定义的变量，绑定的值是电影的列表，所以上面代码Li v-for= item in CMO vies { item } }/Li中cmoviess的值实际上是列表电影的数据，因为父组件已经把值传递给子组件了。
最后，电影中的电影可以在网页上显示。
对于上页显示的无序列表，我们使用子组件，数据从父组件数据转移到子组件，子组件通过props绑定到父组件。
1、Prop 类型
在上面的例子中，我们将props定义为一个从父组件接收数据的数组。我们也可以使用对象来代替，它允许您配置高级选项，例如类型检测、自定义验证和设置默认值。
type：可以是下列本机构造函数之一：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数或以上的数组。将检查道具是否是给定的类型，否则抛出警告。这里有更多关于道具类型的信息。
default：any指定该属性的默认值。如果没有传入属性，则使用该值。对象或数组的默认值必须从工厂函数返回。
required：布尔值定义是否需要道具。在非生产环境中，如果该值为the，并且没有传入属性，将会抛出一个控制台警告。
validator：函数自定义验证函数将替换此属性的值作为唯一参数。在非生产环境中，如果函数返回值falsy(即验证失败)，将抛出一个控制台警告。您可以在此处查阅有关适当验证更多信息。
示例：
//简单语法
vue . component( props-demo-simple ，{
道具：[size ， myMessage]
})
//对象语法，提供验证
vue . component( props-demo-advanced ，{
道具：{
//检测类型
身高：数字，
//检测类型的其他验证
年龄：{
类型：数量，
默认值：0，
必填：真，
验证器：函数(值){
返回值=0
}
}
}
})
注意：我们在使用道具的时候，如果用驼峰命名法，比如cMovies，然后如果用HTML绑定的时候写同样的东西，程序不知道其他的，就需要转换成c-movies作为一个短横线。
四、父子组件通信子传父
在将子组件传递给父组件的场景中，通常情况下，子组件将事件传递给父组件进行监听，告诉父组件用户点击了哪个按钮，使用的函数是$emit。
1、vm.$emit( eventName, […args] )
参数：
eventName：事件名称
args：可变长度数组
在当前实例上触发事件。附加参数被传递给侦听器回调。
示例：
div id=应用程序
test1 @ item-click= CPN click /test1
/div
模板id=test1
差异
button v-for=类别中的项目 @ click= BTN click(item) { { item . name } }/button
/div
/模板
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
方法：{
CPN单击(项目){
console.log(成功，item)
}
},
组件：{
//本地注册组件test1
测试1 :
data(){
返回{
类别：[
{id: aaa ，名称：最佳推荐 }，
{id: bbb ，姓名：手机号码 }，
{id: ccc ，名称：家用电器 }，
{id: ddd ，名称：食品和饮料 }，
]
}
},
方法：{
BTN单击(项目){
这个。$emit(单击项目，项目)
}
},
模板：` #test1
}
}
})
/脚本
上面的代码定义了test1子组件，并通过方法中的$emit传递事件和附加参数项。然后父组件被@item-Click=cpnClick 事件绑定，这样父组件就可以接收子组件的click事件，并触发自己的click事件。效果如下
我们可以在控制台打印的日志中看到带有子组件的类别分类。
五、父子组件通信-结合双向绑定案例
下面这个案例是一个非常全面的案例，结合了父亲对儿子和孩子对父亲，以及v-model。
1、基本模板代码
div id=应用程序
数字1=数字1 :数字2=数字2/cpn
/div
模板id=cpn
差异
h2 { {数字1}}/h2
h2 { {数字2}}/h2
/div
/模板
脚本
const app=new Vue({
埃尔： #app ，
数据：{
num1: 0，
num2: 1，
},
组件：{
//定义子组件cpn
cpn :
模板：`#cpn `，
道具：{
数字1:数字，
数字2:数字，
}
}
},
})
/脚本
代码做了如下的事情
1.定义了子组件cpn，并定义了两个属性number1和number2来接收父组件发送的数据。
2.在html代码中引用子组件cpn，将app strength中的num1和num2传递给子组件props中的属性。
3.最后，页面上显示的数据number1和number2实际上是数据中的num1和num2
最后页面展示的效果就是：
0
一个
2、增加双向绑定
在上述模板的基础上，我们增加了双向绑定，增加了两个输入标签，使用v-model与props中的属性进行绑定。
模板id=cpn
差异
h2props:{{number1}}/h2
输入类型=text v-model=number1
h2props:{{number2}}/h2
输入类型=text v-model=number2
/div
/模板
上面的代码完成了双向绑定，但是会有一个错误警告。
当我们与子组件中的道具双向绑定时，会有一个警告，意思是不要使用双向绑定的道具。建议使用data或compused进行双向绑定，这里修改为与数据绑定。
模板id=cpn
差异
h2data:{{dnumber1}}/h2
输入类型=text v-model=dnumber1
h2data:{{dnumber2}}/h2
输入类型=text v-model=dnumber2
/div
/模板
data(){
返回{
数字1:这个数字1，
这个，数字2，
}
},
当我们绑定到数据时，不会有错误。
3、反向绑定
按照上面的思路，我们希望input在输入值的时候，同时改变父组件中num1和num2的值。这时候就需要反向绑定，把子传递给父。
下面是完整的代码：
div id=应用程序
CPN:number 1= num 1 :number 2= num 2 @ num 1 change= num 1 change @ num 2 change= num 2 change /CPN
/div
模板id=cpn
差异
h2props:{{number1}}/h2
h2data:{{dnumber1}}/h2
标签
输入类型=text :值=dnumber1 @input=num1Input
/标签
h2props:{{number2}}/h2
h2data:{{dnumber2}}/h2
标签
输入类型=text :值=dnumber2 @input=num2Input
/标签
/div
/模板
脚本
const app=new Vue({
埃尔： #app ，
数据：{
num1: 0，
num2: 1，
},
方法：{
num1change(值){
this.num1=parseInt(value)
},
num2change(值){
this.num2=parseInt(value)
},
},
组件：{
//定义子组件cpn
cpn :
模板：`#cpn `，
道具：{
数字1:数字，
数字2:数字，
},
data(){
返回{
数字1:这个数字1，
这个，数字2，
}
},
方法：{
num 1输入(事件){
//1.将输入中的值赋给数据编号
this . dnumber 1=event . target . value
//2.为了让父组件修改该值，需要发出一个事件。
这个。$emit(num1change ，this.dnumber1)
},
num2Input(事件){
//1.将输入中的值赋给数据编号
this . dnumber 2=event . target . value
//2.为了让父组件修改该值，需要发出一个事件。
这个。$emit(num2change ，this.dnumber2)
}
}
}
},
})
/脚本
效果如下：
六、组件访问父访问子
当我们需要在父组件中使用子组件中的函数或属性值时，可以使用$refs，它返回type对象。首先，看下面的代码。
div id=应用程序
参考=aaa/cpn
Button @click=btnClick 按钮/按钮
/div
模板id=cpn
差异
我是一个子组件。
/div
/模板
脚本src=./js/vue.js/script
脚本
const app=new Vue({
埃尔： #app ，
数据：{
消息：“你好”
},
方法：{
btnClick(){
console.log(这个。$refs.aaa.name)
这个。$refs.aaa.showMessage()
}
},
组件：{
cpn :
模板：`#cpn `，
data(){
返回{
名称：“我是子组件的名称”
}
},
方法：{
showMessage(){
console.log(showMessage )
}
}
}
}
})
/脚本
上述代码干了如下几件事情
1.创建一个组件cpn，其中定义了一个方法showMessage和一个属性名。
2.父组件中使用子组件cpn，属性ref值为aaa，相当于唯一标识符。
3.父组件的方法btnClick需要使用子组件中的方法和属性，仅此而已。$refs.aaa，其中aaa是上面绑定的子组件的属性。
4.这个的最后一个用途。$refs.aaa.name表示使用子组件中的name属性。
这就是本文关于Vue子组件和父组件的详细分析。有关Vue子组件和父组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。