vue.js中的子组件与父组件,prop传递数据

组件实例的作用域是孤立的。不能 在子组件的模板内直接引用父组件的数据。需要通过子组件的 props 选项显式声明子组件的数据:
子组件与父组件的关系:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proptitle>
    <script src="vue.js">script>
head>
<body>

<div id="app">
    {{message}}
    <child message="hi!">child>
    
div>
<script>
    //先声明组件,才能使用组件。
    Vue.component('child', {
//        声明props(数组),引用父组件的message。(只是引用该属性,并没有引用属性值)
        props: ['message'],
        template: '

{{ message }}

'
}); new Vue({ el: '#app', data: { message: "hello" } });
script> body> html>

以上是自己的理解,仅供参考,若有错误与不足,欢迎指正
由于上面的实例哪一部分属于父组件,哪部分属于子组件不是太明了,可以和下面的实例想对照,这样会比较清晰一些。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Proptitle>
    <script src="vue.js">script>
head>
<body>

<div id="app">
div>
<script>
    //先声明组件,才能使用组件。
    Vue.component('child', {
//        声明props(数组),引用父组件的message。(只是引用该属性,并没有引用属性值)
        props: ['message'],
        template: '

{{ message }}

'
}); new Vue({ el: '#app', data: { message: "hello" }, template:'
{{message}}
'
//child为在父集中引用的子组件 });
script> body> html>

你可能感兴趣的:(vue.js)