vue在template的插值問題

<!DOCTYPE html>
<html lang="cmn-hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 必選 響應式  -->
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <title>Vue component組件</title>
</head>
<body>
    <h3>Vue component組件</h3>
    <hr>
    <div id="app">

        <!-- <local  :here="local"></local> -->
        <local  :here="local"></local>
            <remote></remote>

    </div>
    <script>
    var app = new Vue({
        el: "#app",
        data:{
            local:'china',
            remote:'USA'
        },
        // <!-- 定義局部組件 -->
        components: {
                        'remote':{
                        template:`<p>我是局部組件remote來自{{remote}}</p>`,
            },
            'local': {
                template: `
          <div style="color:green">
      我是局部組件local,來自{{here}}
  </div>
         `,
         //選項props 數(shù)值
     props:['here'],
            },
        }
    });
    </script>
</body>
</html>

控制臺報錯：
Property or method "remote" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
remote沒有定義。

回答

編輯回答

安于心

這個remote是remote組件里面綁定的那個值，因為你沒有傳數(shù)據(jù)進去，這是我修改你那個之后的代碼，直接復制粘貼你就知道哪里錯了，希望能幫助到你：

<!DOCTYPE html>
<html lang="cmn-hans">
    <head>
        <meta charset="utf-8">
        <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
        <meta name="renderer" content="webkit">
        <!-- 必選 響應式  -->
        <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
        <title>Vue component組件</title>
    </head>

    <body>
        <h3>Vue component組件</h3>
        <hr>
        <div id="app">

            <!-- <local  :here="local"></local> -->
            <local :here="local"></local>
            <remote :remote="remote"></remote>

        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    local: 'china',
                    remote: 'USA'
                },
                // <!-- 定義局部組件 -->
                components: {
                    'remote': {
                        template: `<p>我是局部組件remote來自{{remote}}</p>`,
                        props: ['remote']
                    },
                    'local': {
                        template: `
          <div style="color:green">
      我是局部組件local,來自{{here}}
  </div>
         `,
                        //選項props 數(shù)值
                        props: ['here'],
                    },
                }
            });
        </script>
    </body>
</html>

2018年6月3日 14:31

編輯回答

她愚我

  <local  :here="local"></local>
            <remote></remote>
    </div>
    <script>
    var app = new Vue({
        el: "#app",
        // data:{
        //     local:'china',
        //   //  remote:'USA'
        // },
        data:function(){
                return{
                        local:'China',
                        remote:'USA_main'
                }
        },
        // <!-- 定義局部組件 -->
        components: {
           'remote':{
                        template:`<p>我是局部組件remote來自{{remote}}</p>`,
                         data:function(){
                              return {   remote:'USA_components' }
                        }
            },
            'local': {
                       template: `
          <div style="color:green">
      我是局部組件local,來自{{here}}
  </div>
         `,
         //選項props 數(shù)值
     props:['here'],
            },
        }
    });

最終輸出 USA_components，用的是組件內(nèi)部的數(shù)據(jù)。如果改成這樣，希望輸出外部的數(shù)據(jù):

var app = new Vue({
        el: "#app",
        // data:{
        //     local:'china',
        //   //  remote:'USA'
        // },
        data:{
                        local:'China',
                        remote:'USA_main'
        },
        // <!-- 定義局部組件 -->
        components: {
           'remote':{
                        template:`<p>我是局部組件remote來自{{this.remote}}</p>`,
                        // data:function(){
                        //      return {   remote:'USA_components' }
                        // }
            },
            'local': {
                       template: `
          <div style="color:green">
      我是局部組件local,來自{{here}}
  </div>
         `,
         //選項props 數(shù)值
     props:['here'],
            },
        }
    });

沒有報錯，也沒輸出。想輸出外部的數(shù)值，怎么弄？

2017年6月16日 00:59